如何在 React 中监听 div 的滚动事件

在 React 中监听 div 的滚动事件(scroll),可以通过为该 div 添加 onScroll 属性来实现。以下是一个基本的例子:


✅ 示例:监听 div 的滚动事件

jsx 复制代码
import React, { useRef } from 'react';

function ScrollComponent() {
  const handleScroll = (event) => {
    const scrollTop = event.target.scrollTop;
    const scrollHeight = event.target.scrollHeight;
    const clientHeight = event.target.clientHeight;

    console.log('滚动位置:', scrollTop);
    console.log('可滚动高度:', scrollHeight - clientHeight);
  };

  return (
    <div
      onScroll={handleScroll}
      style={{
        height: '200px',
        overflowY: 'scroll',
        border: '1px solid #ccc',
        padding: '10px',
      }}
    >
      {/* 内容可以足够长以产生滚动 */}
      <div style={{ height: '600px' }}>
        滚动我吧~
      </div>
    </div>
  );
}

export default ScrollComponent;

📌 注意事项

  1. onScroll 只能监听滚动的容器 ,确保容器有 overflow: scrolloverflow: auto

  2. windowscroll 事件需要用 window.addEventListener 绑定:

    jsx 复制代码
    useEffect(() => {
      const handleScroll = () => {
        console.log('window scroll:', window.scrollY);
      };
      window.addEventListener('scroll', handleScroll);
    
      return () => {
        window.removeEventListener('scroll', handleScroll);
      };
    }, []);

通过监听 div 的滚动事件可以实现具体需求,比如滚动到底部、懒加载、吸顶等。

相关推荐
cxr8281 小时前
BMAD框架实践:掌握story-checklist提升用户故事质量
前端·人工智能·agi·智能体·ai赋能
小菜全1 小时前
《React vs Vue:选择适合你的前端框架》
vue.js·react.js·前端框架
emma羊羊1 小时前
【xsslabs】第12-19关
前端·javascript·靶场·xss
真的想不出名儿4 小时前
vue项目引入字体
前端·javascript·vue.js
胡楚昊4 小时前
Polar WEB(1-20)
前端
吃饺子不吃馅4 小时前
AntV X6图编辑器如何实现切换主题
前端·svg·图形学
余防5 小时前
XXE - 实体注入(xml外部实体注入)
xml·前端·安全·web安全·html
jump_jump5 小时前
前端部署工具 PinMe
运维·前端·开源
Baklib梅梅6 小时前
优秀文档案例解析:打造高效用户体验的最佳实践
前端·ruby on rails·前端框架·ruby
慧一居士6 小时前
VUE、jquery、React、Ant Design、element ui、bootstrap 前端框架的 功能总结,示例演示、使用场景介绍、完整对比总结
前端