⬅️ Back to Table of Contents

📄 useScrollLock/directive

📊 Analysis Summary

Metric	Count
🔧 Functions	1
📦 Imports	4
🟢 Vue Composition API	1

📚 Table of Contents

• Imports
• Vue Composition API
• Functions

🛠️ File Location:

📂 packages/core/useScrollLock/directive.ts

📦 Imports

Name	Source
useScrollLock	@vueuse/core
createDisposableDirective	@vueuse/shared
shallowRef	vue
watch	vue

---

Vue Composition API

Name	Type	Reactive Variables	Composables
watch	watch	none	none

---

Functions

onScrollLock(): any

Returns: any

Calls:

• shallowRef (from vue)
• createDisposableDirective (from @vueuse/shared)
• useScrollLock (from @vueuse/core)
• watch (from vue)

Code

function onScrollLock() {
  let isMounted = false
  const state = shallowRef(false)
  return createDisposableDirective<HTMLElement, boolean>((el, binding) => {
    state.value = binding.value
    if (isMounted)
      return
    isMounted = true
    const isLocked = useScrollLock(el, binding.value)
    watch(state, v => isLocked.value = v)
  })
}

---

Generated by Syntax Scribe