页面不对 Next.js 中的事件侦听器做出反应

Question

我的情况很奇怪。 在我的Next.js项目中，我创建了 header ，它使用useEffect钩子在页面滚动上改变颜色：

钩入Header组件：

React.useEffect(() => {
  window.addEventListener('scroll', () => {
    setBackground(window.scrollY > 620);
  });
}, []);

另外，我有这个 header 的默认布局，使其在每个页面上都可见，这是问题所在，这种改变颜色的效果只在主页上有效，当我像这样执行console.log时，我只能在主页，其他地方都没有。。

React.useEffect(() => {
  window.addEventListener('scroll', () => {
    console.log(123);
    setBackground(window.scrollY > 620);
  });
}, []);

此外，我试图将此钩子放在不同的页面上，设置此事件侦听器并至少打印window.scrollY值 - 结果 - 没有，没有结果或日志或错误。 此事件侦听器仅在主页上有效，在其他地方无效。 怎么了？

Answer 1

我发现它为什么会发生，实际上，它与页面布局有关，我为每个页面使用默认包装器，如下所示：

width: 100%;
height: calc(100vh - 50px);
overflow: scroll;
&.flex {
  display: flex;
}

如您所见，高度不是以像素为单位设置的，因此，当我将其更改为像素时，它就开始工作了，所以请注意您的单位。