2.7 Elements-- useWindowScroll

2.7 Elements-- useWindowScroll

https://vueuse.org/useWindowScroll

作用

响应式监听window的滚动距离

官方示例

import { useWindowScroll } from '@vueuse/core'

const { x, y } = useWindowScroll()

x,y的值会随着页面滚动实时变化。

源码分析

export function useWindowScroll({ window = defaultWindow }: ConfigurableWindow = {}) {
  if (!window) {
    return {
      x: ref(0),
      y: ref(0),
    }
  }

  const x = ref(window.pageXOffset)
  const y = ref(window.pageYOffset)

  useEventListener(
    window,
    'scroll',
    () => {
      x.value = window.pageXOffset
      y.value = window.pageYOffset
    },
    {
      capture: false,
      passive: true,
    },
  )

  return { x, y }
}

1. x, y初始值是window.pageXOffset, window.pageYOffset
2. 监听滚动事件，重新赋值。passive: true，显式告诉浏览器，回调中不会阻止默认事件。这有利于减少浏览器等待时间，提高性能

不足：没有提供取消监听的方法。