React中滚动至距顶部300px时切换Div样式的实现方法

场景1：页面整体滚动时触发 #

如果需求是监听整个页面的滚动，之前的代码问题在于错误监听了某个div的滚动事件——页面滚动的主体是window，需修改为监听window的scroll事件：

实现代码 #

import { useState, useEffect } from 'react';

function ScrollTrigger() {
  const [showDiv, setShowDiv] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      // 获取页面滚动距离，兼容不同浏览器
      const scrollDistance = window.scrollY || document.documentElement.scrollTop;
      setShowDiv(scrollDistance > 300);
    };

    // 绑定滚动监听
    window.addEventListener('scroll', handleScroll);
    // 组件卸载时解绑，避免内存泄漏
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <div>
      {/* 页面长内容，用于测试滚动 */}
      <div style={{ height: '1200px', backgroundColor: '#f5f5f5' }}>
        向下滚动超过300px查看效果
      </div>
      {/* 目标Div，根据滚动状态切换显示 */}
      <div 
        style={{ 
          display: showDiv ? 'block' : 'none',
          position: 'fixed',
          bottom: '30px',
          right: '30px',
          padding: '12px 20px',
          backgroundColor: '#2c3e50',
          color: '#fff',
          borderRadius: '4px'
        }}
      >
        已滚动超过300px
      </div>
    </div>
  );
}

export default ScrollTrigger;

场景2：特定Div内部滚动时触发 #

如果需求是监听某个Div内部的滚动，之前的代码需要确保该Div具备滚动容器的核心条件：设置固定高度+overflow: auto/scroll，否则不会产生滚动条，也无法触发onScroll事件。

实现代码 #

import { useState, useRef } from 'react';

function InnerScrollTrigger() {
  const [showDiv, setShowDiv] = useState(false);
  const contentRef = useRef(null);

  const handleScroll = () => {
    const scrollDistance = contentRef.current?.scrollTop;
    setShowDiv(scrollDistance > 300);
  };

  return (
    <div>
      {/* 滚动容器：必须设置高度和overflow属性 */}
      <div 
        ref={contentRef}
        onScroll={handleScroll}
        style={{ 
          height: '600px',
          overflow: 'auto',
          backgroundColor: '#f5f5f5',
          padding: '10px'
        }}
      >
        {/* 容器内的长内容 */}
        <div style={{ height: '1000px' }}>
          内部向下滚动超过300px查看效果
        </div>
      </div>
      {/* 目标Div */}
      <div 
        style={{ 
          display: showDiv ? 'block' : 'none',
          marginTop: '20px',
          padding: '12px',
          backgroundColor: '#2c3e50',
          color: '#fff'
        }}
      >
        内部滚动超过300px
      </div>
    </div>
  );
}

export default InnerScrollTrigger;

关键说明 #

• 页面滚动时，必须监听window的滚动事件，而非某个Div的onScroll。
• 内部Div滚动时，滚动容器必须设置固定高度和overflow属性，否则无法触发滚动事件。
• 使用useEffect绑定/解绑window滚动监听，避免组件卸载后残留事件监听导致内存泄漏。

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