React本地开发环境滚动时window.pageYOffset始终为0是什么原因？

问题根源 #

你触发的是Container组件内部的滚动事件，而非浏览器窗口的滚动事件，因此代表整个窗口滚动偏移量的window.pageYOffset始终为0。同时你需要先确认两个前置条件：

• Container对应的原生DOM元素已经设置了overflow: auto或overflow: scroll样式，否则不会触发内部滚动事件
• 如果你使用的是自定义Container组件，需要确保它将onScroll事件透传到内部包裹的原生DOM节点上

解决方案 #

方案1：监听Container内部滚动（匹配你当前绑定逻辑的预期场景） #

直接读取滚动事件目标的scrollTop属性判断滚动状态即可：

Header.Frame = function HeaderFrame({ children }) 
{
  const [scrolling, setScrolling] = useState(false);
      
  return (
    <Container 
      onScroll={(e) => setScrolling(e.target.scrollTop !== 0)}
    >
      {children}
    </Container>
  );
}

方案2：监听整个浏览器窗口滚动 #

如果你的滚动逻辑是针对整页滚动的，就需要把事件监听器绑定到window上，同时做好副作用清理：

Header.Frame = function HeaderFrame({ children }) 
{
  const [scrolling, setScrolling] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      setScrolling(window.pageYOffset !== 0);
    };
    window.addEventListener('scroll', handleScroll);
    // 组件卸载时移除监听器避免内存泄漏
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);
      
  return <Container>{children}</Container>;
}

内容的提问来源于stack exchange，提问作者Anthony U