React中document.body的scroll事件监听器失效问题咨询

我复现了这个问题：document.body.addEventListener("scroll", func) 无法正常工作。之前使用React旧版本时该功能可正常运行，推测问题可能出在React最新版本上。

原因分析 #

在React 18及以后的版本中，默认渲染模式下，页面的滚动容器往往不是document.body：

• 很多全局样式会设置body { height: 100%; overflow: hidden; }，把滚动行为转移到html元素上
• 若React应用挂载在自定义容器（比如#root）中，且该容器设置了可滚动样式，滚动事件也会绑定在这个容器上

解决办法 #

1. 确认实际滚动容器
   打开浏览器开发者工具，滚动页面时观察哪个元素出现滚动条，这个元素就是实际的滚动容器（通常是html或#root）。

2. 绑定事件到正确容器
   把监听事件绑定到实际滚动容器上，示例代码：

   // 绑定到html元素
   document.documentElement.addEventListener("scroll", func);
   // 或绑定到React根容器
   document.getElementById("root").addEventListener("scroll", func);
   

3. React组件内规范写法
   在React组件中，建议在useEffect中添加监听，并在组件卸载时移除，避免内存泄漏：

   import { useEffect } from 'react';
   
   function App() {
     useEffect(() => {
       const handleScroll = () => {
         console.log('滚动事件触发');
       };
       // 替换为实际的滚动容器
       const scrollContainer = document.documentElement;
       scrollContainer.addEventListener('scroll', handleScroll);
       // 组件卸载时移除监听
       return () => scrollContainer.removeEventListener('scroll', handleScroll);
     }, []);
   
     return (
       <div style={{ height: '2000px' }}>
         滚动测试内容
       </div>
     );
   }
   
   export default App;
   

内容的提问来源于stack exchange，提问作者Вадим