滚动切换背景色失效：window.scrollY无响应问题求助

你的核心问题出在滚动容器的判断上：

• 你的<main>元素设置了position: fixed，并且覆盖了整个视口（top/right/bottom/left都设为0），同时开启了overflowY: auto
• 这意味着页面的滚动行为实际发生在<main>元素内部，而不是window对象上，所以监听window的scroll事件不会触发，window.scrollY自然始终为0

需要把监听对象从window改成你的<main>容器，同时修复useEffect的内存泄漏问题：

1. 用useRef获取<main>元素的DOM引用
2. 监听该元素的scroll事件，用element.scrollTop替代window.scrollY
3. 给useEffect添加空依赖数组，并在清理函数中移除事件监听，避免重复绑定和内存泄漏

修改后的完整代码：

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

// ... 你的组件其他代码
const [mainColor, setMainColor] = useState('red');
const mainRef = useRef(null); // 创建ref

const listenScrollEvent = () => {
  // 用main元素的scrollTop判断滚动位置
  mainRef.current.scrollTop < 10
    ? setMainColor('green')
    : setMainColor('red');
};

useEffect(() => {
  const mainElement = mainRef.current;
  if (!mainElement) return;

  mainElement.addEventListener('scroll', listenScrollEvent);
  // 清理函数：组件卸载时移除监听
  return () => {
    mainElement.removeEventListener('scroll', listenScrollEvent);
  };
}, []); // 空依赖数组确保只执行一次

return (
  <main 
    ref={mainRef} // 绑定ref到main元素
    className={cx(classes.content, { [classes.disableScroll]: show })}
    style={{ backgroundColor: mainColor }}
  >
    {children}
  </main>
);

• 原来的useEffect没有依赖数组，会导致组件每次渲染都重复添加scroll事件监听，这会引发性能问题，必须加上空依赖数组
• 一定要在清理函数中移除事件监听，防止组件卸载后仍然存在无效的事件绑定，造成内存泄漏

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