React中滚动位置检测异常，st变量始终为0，需实现滚动隐藏导航栏

你遇到的问题是滚动事件能正常触发，但window.pageYOffset/document.documentElement.scrollTop始终返回0，这大概率是因为页面的实际滚动容器不是window，而是某个内部元素。

常见原因 #

如果你的App根组件或某个父容器设置了overflow-y: scroll/overflow-y: auto，并且这个容器的高度被限制（比如设置了固定高度或占满视口），那么页面的滚动行为就由这个内部容器承担，而非window，此时window的滚动值自然一直是0。

解决方案 #

1. 确认滚动容器

打开浏览器开发者工具，检查页面元素：

• 找一下哪个元素带有overflow-y: scroll/auto样式
• 滚动页面时，观察这个元素的scrollTop值是否变化（在Elements面板的Styles右侧的Computed里查看）

2. 修改代码监听正确的滚动容器

你可以通过document.scrollingElement获取浏览器当前的滚动容器（兼容性较好），或者直接获取你确认的内部容器ref，然后监听它的scroll事件：

修改NavBar组件中的useEffect部分：

useEffect(() => {
    // 获取实际滚动容器
    const scrollContainer = document.scrollingElement || document.documentElement;
    
    const onScroll = () => {
        // 从滚动容器获取滚动位置
        const st = scrollContainer.scrollTop;

        console.log(st);
        if (st > lastScrollTop.current) {
            console.log('Scrolling DOWN');
            // 这里添加隐藏导航栏的逻辑，比如：
            // Nav.current.style.transform = 'translateY(-100%)';
            // Nav.current.style.transition = 'transform 0.3s ease';
        } else if (st < lastScrollTop.current) {
            console.log('Scrolling UP');
            // 显示导航栏的逻辑：
            // Nav.current.style.transform = 'translateY(0)';
        }
        lastScrollTop.current = st;
    };

    scrollContainer.addEventListener('scroll', onScroll, true);

    return () => {
        scrollContainer.removeEventListener('scroll', onScroll, true);
    };
}, []);

额外检查

如果以上方法没用，再确认两点：

• 页面内容高度是否超过视口？如果内容高度不够，不会产生滚动，scrollTop自然为0
• 导航栏的position: fixed是否导致计算异常？可以暂时移除fixed样式测试滚动值是否正常

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