useWindowScroll

分类

元素

导出大小

2.24 kB

上次更改

10 个月前

响应式窗口滚动

演示

源代码在线演示 (beta)

在屏幕右下角查看滚动值。

滚动值

x: 0
y: 0

用法

vue

<script setup lang="ts">
import { useWindowScroll
 } from '@vueuse/core'

const { x
, y
 } = useWindowScroll
()
</script>

<template>
  <div
>
    read current x, y scroll: {{ x
 }}, {{ y
 }}
  </div
>
  <button
 @click
="x
 = 100">
    scroll X to 100
  </button
>
  <button
 @click
="y
 = 100">
    scroll Y to 100
  </button
>
</template>

类型声明

export interface UseWindowScrollOptions
  extends ConfigurableWindow,
    UseScrollOptions {}
/**
 * Reactive window scroll.
 *
 * @see https://vueuse.org.cn/useWindowScroll
 * @param options
 */
export declare function useWindowScroll
(options
?: UseWindowScrollOptions): {
  x
: WritableComputedRef
<number, number>
  y
: WritableComputedRef
<number, number>
  isScrolling
: ShallowRef
<boolean, boolean>
  arrivedState
: {
    left
: boolean
    right
: boolean
    top
: boolean
    bottom
: boolean
  }
  directions
: {
    left
: boolean
    right
: boolean
    top
: boolean
    bottom
: boolean
  }
  measure
(): void
}
export type UseWindowScrollReturn
 = ReturnType
<typeof useWindowScroll
>