useScrollLock

类别

Sensors

导出体积

1.2 kB

上次更改

6 months ago

锁定元素的滚动。

示例

源码 playground (beta)

左上角

左下角

右上角

右下角

滚动

是否锁定 false

用法

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 // 锁定
isLocked
.value
 = false // 解锁
</script>

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

指令用法

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
()">
    切换锁定状态
  </button
>
</template>

类型声明

/**
 * 锁定元素的滚动。
 *
 * @see https://vueuse.org/useScrollLock
 * @param element
 */
export declare function useScrollLock
(
  element
: MaybeRefOrGetter
<
    HTMLElement | SVGElement | Window | Document | null | undefined
  >,
  initialState
?: boolean,
): WritableComputedRef
<boolean, boolean>