useScrollLock

カテゴリ

センサー

エクスポートサイズ

915 B

最終変更日

先週

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

デモ

ソース

左上

左下

右上

右下

スクロール

isLocked false

使用方法

vue

<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" />
</template>

ディレクティブの使用

この関数は、`@vueuse/components`パッケージを介してディレクティブバージョンも提供します。使用方法の詳細はこちら。

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-lock="isLocked">
    <div v-for="item in data" :key="item">
      {{ item }}
    </div>
  </div>
  <button @click="toggleLock()">
    Toggle lock state
  </button>
</template>

型定義

typescript

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