如何在 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 的滚动事件可以实现具体需求,比如滚动到底部、懒加载、吸顶等。

相关推荐
BillKu13 分钟前
容器元素的滚动条回到顶部
前端·javascript·vue.js
weixin_4233919316 分钟前
React 19 全面解析:颠覆性的新特性与实战指南
前端·javascript·react.js
weixin_4233919316 分钟前
React Hooks 钩子
前端·javascript·react.js
CUGGZ17 分钟前
第三代 React,怎么玩?
前端·javascript·react.js
星哥说事19 分钟前
狂揽82.7k的star,这款开源可视化神器,轻松创建流程图和图表
前端
硅基宙宇AIGC20 分钟前
阿里Qoder重磅登场:AI编程平台新王者,程序员的饭碗要换了吗?
前端
影i21 分钟前
跨域登录 / Token 共享 踩坑记录
前端
小爱同学_32 分钟前
从前端模块化历史到大厂面试题
前端·javascript·面试
雪中何以赠君别32 分钟前
AMD、CMD 和 ES6 Module 的区别与演进
前端·javascript
专注VB编程开发20年42 分钟前
rust语言-对象多级访问
服务器·前端·rust