NextJS监听滚动位置时window.scrollY始终为0问题求助

核心诱因 #

你遇到的现象是React项目的典型场景：页面滚动行为没有发生在window或document.body上，而是被限制在了内部自定义根容器中，因此window.scrollY永远返回0，绑定在window上的scroll事件也不会触发。
大部分情况是全局样式对html、body设置了height: 100% + overflow: hidden，导致滚动行为被转移到了内层的子容器（比如Create React App的#root容器、Next.js的#__next容器）。

排查步骤 #

• 打开浏览器开发者工具的元素面板，滚动页面的同时观察各个元素的scrollTop属性变化，定位到实际触发滚动的容器元素。
• 确认全局样式中html、body的overflow配置，确认是否存在溢出隐藏的设置。

修复代码示例 #

以下为监听实际滚动容器的代码，同时补充了事件监听的清理逻辑避免内存泄漏：

const Product = ({ page, componentData, seo }) => {
  useEffect(() => {
    // 替换为你实际定位到的滚动容器选择器
    const scrollContainer = document.querySelector('#__next')
    const handleScroll = () => {
      // 读取滚动容器的scrollTop属性，而非window.scrollY
      console.log(scrollContainer.scrollTop)
    }
    scrollContainer?.addEventListener('scroll', handleScroll)
    // 组件卸载时移除监听
    return () => {
      scrollContainer?.removeEventListener('scroll', handleScroll)
    }
  }, [])
  // 后续组件原有逻辑
}

可选调整方案 #

如果你希望滚动行为发生在全局window上，直接删除html、body的overflow: hidden配置即可，之后就可以直接监听window的scroll事件、正常读取window.scrollY的值。

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