useScrollLock
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
Contributors
webfansplz
Anthony Fu