useWindowScroll

類別

元素

導出大小

666 B

上次更改

3 個月前

響應式視窗滾動

示範

原始碼

請查看螢幕右下角的滾動值。

滾動值

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,
    UseScrollOptions {}
/**
 * Reactive window scroll.
 *
 * @see https://vueuse.dev.org.tw/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>