作品集网站中useEffect绑定scroll事件更新isTop状态失效求助

核心原因 #

你的scroll事件未触发，大概率是以下两个常见问题导致：

1. 滚动容器绑定错误：你给document绑定了滚动事件，但多数网页的滚动行为实际发生在window上；如果页面里有设置overflow: scroll/auto的内部容器，滚动事件也只会在该容器上触发。
2. 页面无滚动空间：若页面内容高度小于等于视口高度，浏览器不会出现滚动条，自然不会触发scroll事件。

另外，代码里局部变量isTop和状态变量同名虽不影响功能，但易造成混淆，建议改名（比如currentIsTop）。

修复方案 #

1. 绑定到window的滚动事件

这是网页全局滚动场景下最可靠的选择：

const [isTop, setIsTop] = useState(true);

useEffect(() => {
    const handleScroll = () => {
        const currentIsTop = window.scrollY < 100;
        console.log(currentIsTop);
        setIsTop(currentIsTop);
    }

    window.addEventListener('scroll', handleScroll);
    return () => {
        window.removeEventListener('scroll', handleScroll);
    }
}, []);

2. 确保页面有滚动空间

临时添加一段长内容验证滚动事件是否能触发：

<div style="height: 2000px; border: 1px solid #ccc;">
  测试滚动内容
</div>

3. 针对自定义滚动容器的处理

如果滚动是在某个内部元素中（比如带overflow: scroll的容器），需要给该元素绑定事件：

const [isTop, setIsTop] = useState(true);
const scrollRef = useRef(null);

useEffect(() => {
    const handleScroll = () => {
        if (!scrollRef.current) return;
        const currentIsTop = scrollRef.current.scrollTop < 100;
        console.log(currentIsTop);
        setIsTop(currentIsTop);
    }

    scrollRef.current?.addEventListener('scroll', handleScroll);
    return () => {
        scrollRef.current?.removeEventListener('scroll', handleScroll);
    }
}, []);

// 渲染时给滚动容器添加ref
return (
  <div ref={scrollRef} style={{ height: '500px', overflow: 'auto' }}>
    {/* 长内容区域 */}
  </div>
);

额外性能优化建议 #

滚动事件触发频率高，可给处理函数添加节流，避免频繁更新状态：

// 自己实现节流函数
const throttle = (func, delay) => {
  let timeoutId;
  return (...args) => {
    if (!timeoutId) {
      timeoutId = setTimeout(() => {
        func(...args);
        timeoutId = null;
      }, delay);
    }
  };
};

const [isTop, setIsTop] = useState(true);

useEffect(() => {
    const throttledHandleScroll = throttle(() => {
        const currentIsTop = window.scrollY < 100;
        setIsTop(currentIsTop);
    }, 100); // 100ms内仅触发一次

    window.addEventListener('scroll', throttledHandleScroll);
    return () => {
        window.removeEventListener('scroll', throttledHandleScroll);
    }
}, []);

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