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>;
}
