Next.js项目中window.addEventListener('scroll')无法触发的排查与解决

可能的原因 #

• 滚动容器并非window：如果页面内容被某个内部容器（比如MultiLang或页面组件内的元素）包裹，且该容器设置了overflow: auto或overflow: scroll，滚动事件会触发在这个容器上，而非全局window对象。
• 全局样式限制window滚动：如果globals.css中给html或body设置了height: 100% + overflow: hidden，会导致window无法生成滚动条，自然触发不了scroll事件。
• 未清理事件监听（非直接触发问题，但可能引发异常）：原代码未移除监听，长期运行可能导致内存泄漏，但不是事件不触发的直接原因。

修复步骤 #

1. 检查并调整全局样式 #

打开globals.css，查看是否存在限制滚动的样式：

html, body {
  height: 100%;
  overflow: hidden;
}

如果有，移除overflow: hidden，或者改用min-height: 100vh替代固定高度：

html, body {
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

2. 针对内部滚动容器绑定事件 #

如果滚动发生在内部容器而非window，需要通过ref获取该容器元素再绑定事件。假设MultiLang组件内有滚动容器：

import "../styles/globals.css";
import type { AppProps } from "next/app";
import { LangContextProvider } from "../context/language";
import React, { useState, useEffect, useRef, forwardRef } from "react";

// 假设MultiLang需要用forwardRef传递ref
const MultiLang = forwardRef<HTMLDivElement, { children: React.ReactNode }>(({ children }, ref) => {
  return <div ref={ref} style={{ overflowY: "auto", height: "100vh" }}>{children}</div>;
});

function MyApp({ Component, pageProps }: AppProps) {
  const scrollContainerRef = useRef<HTMLDivElement>(null);

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

    const handleScroll = () => {
      console.log("滚动位置：", container.scrollTop);
    };

    container.addEventListener("scroll", handleScroll);
    return () => container.removeEventListener("scroll", handleScroll);
  }, []);

  return (
    <LangContextProvider>
      <MultiLang ref={scrollContainerRef}>
        <Component {...pageProps} />
      </MultiLang>
    </LangContextProvider>
  );
}

export default MyApp;

3. 修正window滚动事件的写法（含清理逻辑） #

如果滚动确实发生在window，修正代码添加清理函数，确保样式允许window滚动：

useEffect(() => {
  const handleScroll = () => {
    console.log("window滚动位置：", window.scrollY);
  };
  window.addEventListener("scroll", handleScroll);
  // 组件卸载时移除监听，避免内存泄漏
  return () => {
    window.removeEventListener("scroll", handleScroll);
  };
}, []);

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