Skip to content
On this page

useScrollLock

Category
Last Changed
3 days ago

Lock scrolling of the element.

Demo

TopLeft
BottomLeft
TopRight
BottomRight
Scroll Me
isLocked false

Usage

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

const el = ref<HTMLElement | null>(null)
const isLocked = useScrollLock(el)

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

<template>
  <div ref="el"></div>
</template>
<script setup lang="ts">
import { useScrollLock } from '@vueuse/core'

const el = ref<HTMLElement | null>(null)
const isLocked = useScrollLock(el)

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

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

Type Declarations

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

Source

SourceDemoDocs

Contributors

webfansplz
Anthony Fu

Changelog

v7.7.1 on 3/5/2022
75146 - fix: should work normal with initialState (#1257)
v7.3.0 on 12/12/2021
1cae1 - fix: set the overflow property on iOS device as well (#1033)
v7.1.0 on 11/24/2021
93089 - feat(useLockScroll): new function (#958)
useScrollLock has loaded