Skip to content

useWindowScroll

类别
导出体积
2.24 kB
上次更改
7 months ago

响应式窗口滚动

示例

查看屏幕右下角的滚动值。
滚动值
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>

类型声明

typescript
export interface UseWindowScrollOptions
  extends ConfigurableWindow,
    UseScrollOptions {}
/**
 * 响应式窗口滚动。
 *
 * @see https://vueuse.org/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>

源码

源码演示文档

贡献者

Anthony Fu
一纸忘忧
Anthony Fu
Nurettin Kaya
Antério Vieira
青椒肉丝
Robin
Chen
Jelf
webfansplz
Maik Kowol
Shinigami
Alex Kozack

更新日志

a033e - feat: use useScroll under the hood (#4424)
0a9ed - feat!: drop Vue 2 support, optimize bundles and clean up (#4349)
931b2 - feat: allow rewriting back to scroll (#3500)