React应用onScroll事件未按预期触发，sticky header组件无法正常显示

开发者阿泽

2026-10-6

问题根因汇总

你的页面滚动行为没有发生在window对象上：vdp-scroll-container设置了fixed定位占满整个视口，且开启了纵向滚动，所有滚动行为都是在这个DOM元素内部触发的，window本身的滚动距离永远为0，自然不会触发window的scroll事件，和这个容器的样式设置直接相关。
给容器绑定事件失败是语法错误：document.getElementById()的参数不需要加#前缀，你传入#vdp-scroll-container会导致找不到对应元素，事件绑定逻辑直接跳过，自然没有回调触发。
你之前写的useEffect存在依赖项错误，即使事件绑定成功也会出现频繁解绑重绑的性能问题。

正确实现代码

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

const YourComponent = () => {
  const [scrollTop, setScrollTop] = useState(0);
  const shouldShowStickyHeader = scrollTop > 1000;

  // 用useCallback缓存滚动回调，避免重渲染导致函数引用变化
  const handleScroll = useCallback((e) => {
    console.log('setScroll');
    // 直接取当前滚动容器的scrollTop，不要用window.pageYOffset
    setScrollTop(e.currentTarget.scrollTop);
    console.log(new Date().getTime());
  }, []);

  useEffect(() => {
    const scrollContainer = document.getElementById('vdp-scroll-container');
    if (!scrollContainer) return;
    
    scrollContainer.addEventListener('scroll', handleScroll);
    return () => {
      scrollContainer.removeEventListener('scroll', handleScroll);
    };
  // 空依赖数组，只在组件挂载时执行一次绑定，卸载时解绑
  }, [handleScroll]);

  return (
    <>
      {shouldShowStickyHeader && <YourStickyHeader />}
      {/* 其他页面内容 */}
    </>
  )
}