Next.js中页面不响应滚动事件监听的问题求助

最可能原因：Header为服务器组件（App Router场景） #

在Next.js App Router中，所有组件默认是服务器组件，而useEffect、window这类浏览器专属API仅能在客户端组件中运行。如果你的Header组件未添加'use client'指令，它在非主页的其他页面会以服务器组件模式渲染，导致useEffect完全不执行，自然看不到日志也无法监听scroll事件。

解决方法： #

在Header组件最顶部添加客户端组件标识：

'use client';

import { useEffect, useState } from 'react';

export default function Header() {
  const [isScrolled, setIsScrolled] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 620);
      console.log(window.scrollY);
    };
    window.addEventListener('scroll', handleScroll);
    // 清理事件监听，避免内存泄漏
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <header style={{ backgroundColor: isScrolled ? '#fff' : 'transparent' }}>
      {/* 头部内容 */}
    </header>
  );
}

其他可能原因：滚动容器并非window #

若部分页面的内容被包裹在自定义滚动容器内（比如设置了height: 100vh; overflow-y: auto的<div>），滚动事件会触发在该容器上而非window，此时window.scrollY始终为0，监听window的scroll事件自然无效。

解决方法： #

1. 找到页面中的自定义滚动容器，用useRef获取其DOM元素
2. 监听该容器的scroll事件替代window：

'use client';

import { useEffect, useState, useRef } from 'react';

export default function SomePage() {
  const scrollContainerRef = useRef(null);
  const [isScrolled, setIsScrolled] = useState(false);

  useEffect(() => {
    const container = scrollContainerRef.current;
    if (!container) return;

    const handleScroll = () => {
      setIsScrolled(container.scrollTop > 620);
      console.log(container.scrollTop);
    };
    container.addEventListener('scroll', handleScroll);
    return () => container.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <div ref={scrollContainerRef} style={{ height: '100vh', overflowY: 'auto' }}>
      {/* 页面内容 */}
    </div>
  );
}

额外检查点：路由切换时的事件绑定问题 #

如果Header是复用组件，但路由切换后事件监听丢失，可能是useEffect的依赖项设置错误或清理逻辑缺失。确保useEffect的依赖数组为空（仅在组件挂载时绑定一次），且返回的清理函数正确移除监听事件。

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