useScrollLock

要素のスクロールをロックします。

使用法

<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 // ロック
isLocked.value = false // ロック解除
</script>

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

ディレクティブの使用法

<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-lock="isLocked">
    <div v-for="item in data" :key="item">
      {{ item }}
    </div>
  </div>
  <button @click="toggleLock()">
    ロック状態を切り替える
  </button>
</template>