useScrollLock

分类

传感器

导出大小

1.2 kB

上次更改

8 个月前

锁定元素的滚动。

演示

源代码演练场（测试版）

左上

左下

右上

右下

滚动我

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

类型声明

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