为何滚动页面时window.scrollY值始终不变化？

云原生阿岚

2026-6-26

问题分析与解决办法

最可能的原因：滚动容器不是window

如果页面里存在某个容器（比如<body>、自定义<div>）设置了overflow: scroll或overflow: auto，且实际滚动操作是针对这个容器而非整个window，那么window.scrollY自然不会发生变化。

解决步骤：

检查页面CSS，确认是否有元素设置了height: 100vh+overflow: scroll这类样式，导致滚动范围被限制在该元素内部。
将滚动事件监听绑定到实际滚动的容器上，用该元素的scrollTop属性替代window.scrollY：

// 示例：假设滚动容器是id为scrollContainer的div
const scrollContainer = document.getElementById('scrollContainer');

useEffect(() => {
  function changeColor() {
    const scrolled = scrollContainer.scrollTop > 60;
    console.log(scrolled);
    setColor(scrolled);
  }

  scrollContainer.addEventListener('scroll', changeColor);
  // 组件卸载时移除监听，避免内存泄漏
  return () => scrollContainer.removeEventListener('scroll', changeColor);
}, []);

其他可能的问题点

事件监听时机错误：如果你的代码直接写在组件顶层（而非useEffect钩子内），会导致组件每次渲染都重复添加监听，甚至在组件未挂载时就执行，可能引发异常。需将事件监听放在useEffect中，确保组件挂载后再绑定：

useEffect(() => {
  function changeColor() {
    const scrolled = window.scrollY > 60;
    console.log(scrolled);
    setColor(scrolled);
  }

  window.addEventListener('scroll', changeColor, true);
  return () => window.removeEventListener('scroll', changeColor, true);
}, []);