1---
2category: Sensors
3---
4 
5# useScrollLock
6 
7Lock scrolling of the element.
8 
9## Usage
10 
11```vue
12<script setup lang="ts">
13import { useScrollLock } from '@vueuse/core'
14import { useTemplateRef } from 'vue'
15 
16const el = useTemplateRef('el')
17const isLocked = useScrollLock(el)
18 
19isLocked.value = true // lock
20isLocked.value = false // unlock
21</script>
22 
23<template>
24  <div ref="el" />
25</template>
26```
27 
28## Directive Usage
29 
30```vue
31<script setup lang="ts">
32import { vScrollLock } from '@vueuse/components'
33 
34const data = ref([1, 2, 3, 4, 5, 6])
35const isLocked = ref(false)
36const toggleLock = useToggle(isLocked)
37</script>
38 
39<template>
40  <div v-scroll-lock="isLocked">
41    <div v-for="item in data" :key="item">
42      {{ item }}
43    </div>
44  </div>
45  <button @click="toggleLock()">
46    Toggle lock state
47  </button>
48</template>
49```
50 
51## Type Declarations
52 
53```ts
54/**
55 * Lock scrolling of the element.
56 *
57 * @see https://vueuse.org/useScrollLock
58 * @param element
59 */
60export declare function useScrollLock(
61  element: MaybeRefOrGetter<
62    HTMLElement | SVGElement | Window | Document | null | undefined
63  >,
64  initialState?: boolean,
65): WritableComputedRef<boolean, boolean>
66```
67