useWindowScroll

类别

Elements

导出体积

2.25 kB

上次更改

2 months ago

响应式窗口滚动

示例

源码 playground (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 {}
export interface UseWindowScrollReturn extends UseScrollReturn {}
/**
 * 响应式窗口滚动。
 *
 * @see https://vueuse.org/useWindowScroll
 * @param options
 */
export declare function useWindowScroll
(
  options
?: UseWindowScrollOptions,
): UseWindowScrollReturn