Skip to content

useScrollLock

Category
Export Size
1.2 kB
Last Changed
5 months ago

Lock scrolling of the element.

Demo

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
<HTMLElement>('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

ts
/**
 * 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>

Source

SourceDemoDocs

Contributors

Anthony Fu
Anthony Fu
webfansplz
IlyaL
Ayaka Rizumu
Robin
Coder Poet
YASS
Doctorwu
Zhaolin Liang
Valery
Dominik Pschenitschni
Robin Scholz
Jelf
wheat

Changelog

v12.8.0 on
7432f - feat(types): deprecate MaybeRef and MaybeRefOrGetter in favor of Vue's native (#4636)
v12.3.0 on
59f75 - feat(toValue): deprecate toValue from @vueuse/shared in favor of Vue's native
v12.0.0-beta.1 on
0a9ed - feat!: drop Vue 2 support, optimize bundles and clean up (#4349)
v10.10.0 on
d9ee4 - fix: function unlock does not work (#3847)
v10.9.0 on
74e86 - fix: initialOverflow is not working (#3798)
v10.6.0 on
03866 - fix(onScrollLock): cache the el initial overflow value (#3527)
v10.4.0 on
8acdb - fix: support using window or document (#3319)
v10.2.0 on
cdc28 - fix: fix scrollable children check (#3065)
v10.0.0-beta.4 on
4d757 - feat(types)!: rename MaybeComputedRef to MaybeRefOrGetter
10e98 - feat(toRef)!: rename resolveRef to toRef
0a72b - feat(toValue): rename resolveUnref to toValue

Released under the MIT License.

Build faster with AI
New Masterclass to help you leverage AI in your Vue workflow
Get Early Access