react如何获取页面滚动位置

获取页面滚动位置的方法

使用window.scrollY或window.pageYOffset
这两个属性返回文档在垂直方向上的滚动距离（像素），window.scrollY是现代浏览器的标准属性，window.pageYOffset是其别名，两者通常可以互换使用。水平方向对应window.scrollX或window.pageXOffset。

const scrollY = window.scrollY || window.pageYOffset;
console.log(`垂直滚动位置: ${scrollY}px`);

通过document.documentElement或document.body
某些旧浏览器可能需要通过document.documentElement.scrollTop或document.body.scrollTop获取滚动位置。兼容性写法如下：

const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
console.log(`垂直滚动位置: ${scrollTop}px`);

监听滚动事件
结合useEffect钩子（React中）实时监听滚动位置变化：

import { useState, useEffect } from 'react';

function Component() {
  const [scrollPosition, setScrollPosition] = useState(0);

  useEffect(() => {
    const handleScroll = () => {
      const position = window.scrollY;
      setScrollPosition(position);
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return <div>当前滚动位置: {scrollPosition}px</div>;
}

使用第三方库（如react-use）
简化代码的库如react-use提供了现成的钩子：

import { useScroll } from 'react-use';

function Component() {
  const { y } = useScroll(document);
  return <div>垂直滚动位置: {y}px</div>;
}