useScrollLock

Demo

source playground (beta)

TopLeft

BottomLeft

TopRight

BottomRight

Scroll Me

isLocked false

Usage

vue

<script setup lang="ts">
import { useScrollLock
 } from '@vueuse/core'
import { useTemplateRef
 } from 'vue'

const el
 = useTemplateRef
('el')
const isLocked
 = useScrollLock
(el
)

isLocked
.value
 = true // lock
isLocked
.value
 = false // unlock
</script>

<template>
  <div
 ref
="el
" />
</template>

Directive Usage

This function also provides a directive version via the @vueuse/components package. Learn more about the usage.

vue

<script setup lang="ts">
import { vScrollLock
 } from '@vueuse/components'

const data
 = ref
([1, 2, 3, 4, 5, 6])
const isLocked
 = ref
(false)
const toggleLock
 = useToggle(isLocked
)
</script>

<template>
  <div
 v-scroll-lo
ck="isLocked
">
    <div
 v-for="item
 in data
" :key
="item
">
      {{ item
 }}
    </div
>
  </div
>
  <button
 @click
="toggleLock
()">
    Toggle lock state
  </button
>
</template>

Type Declarations

/**
 * Lock scrolling of the element.
 *
 * @see https://vueuse.org/useScrollLock
 * @param element
 */
export declare function useScrollLock
(
  element
: MaybeRefOrGetter
<
    HTMLElement | SVGElement | Window | Document | null | undefined
  >,
  initialState
?: boolean,
): WritableComputedRef
<boolean, boolean>