useWindowScroll

カテゴリ

要素

エクスポートサイズ

555 B

最終変更日

先週

リアクティブなウィンドウスクロール

デモ

ソース

画面の右下隅にスクロール値が表示されます。

スクロール値

x: 0
y: 0

使用方法

import { useWindowScroll } from '@vueuse/core'

const { x, y } = useWindowScroll()
console.log(x.value) // read current x scroll value
y.value = 100 // scroll y to 100

型宣言

typescript

export interface UseWindowScrollOptions extends ConfigurableWindow {
  behavior?: ScrollBehavior
}
/**
 * Reactive window scroll.
 *
 * @see https://vueuse.dokyumento.jp/useWindowScroll
 * @param options
 */
export declare function useWindowScroll(options?: UseWindowScrollOptions): {
  x: Ref<number, number>
  y: Ref<number, number>
}
export type UseWindowScrollReturn = ReturnType<typeof useWindowScroll>