Skip to content

useWindowScroll

Category
Export Size
555 B
Last Changed
15 minutes ago

响应式窗口滚动

Demo

查看屏幕右下角的滚动值。
滚动值
x: 0
y: 0

用法

js
import { useWindowScroll } from '@vueuse/core'

const { x, y } = useWindowScroll()
console.log(x.value) // 读取当前的 x 滚动值
y.value = 100 // 将 y 滚动到 100

类型声明

typescript
export interface UseWindowScrollOptions extends ConfigurableWindow {
  behavior?: ScrollBehavior
}
/**
 * 响应式窗口滚动。
 *
 * @see https://vueuse.org/useWindowScroll
 * @param options
 */
export declare function useWindowScroll(options?: UseWindowScrollOptions): {
  x: Ref<number, number>
  y: Ref<number, number>
}
export type UseWindowScrollReturn = ReturnType<typeof useWindowScroll>

Source

SourceDemoDocs

贡献者

Anthony Fu
丶远方
Nurettin Kaya
Antério Vieira
Anthony Fu
Chen
Jelf
webfansplz
Maik Kowol
Shinigami
Alex Kozack

变更日志

v10.6.0 on 11/9/2023
931b2 - feat: allow rewriting back to scroll (#3500)
v9.13.0 on 2/18/2023
e490a - fix: use scrollX instead of pageXOffset (#2776)
v9.7.0 on 12/16/2022
5df0a - fix: use configured window onScroll (#2545)

Released under the MIT License.