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

相关推荐
a cool fish(无名)34 分钟前
rust-参考与借用
java·前端·rust
只有干货1 小时前
前端传字符串 后端比较date类型字段
前端
波波鱼દ ᵕ̈ ૩2 小时前
学习:JS[6]环境对象+回调函数+事件流+事件委托+其他事件+元素尺寸位置
前端·javascript·学习
climber11213 小时前
【Python Web】一文搞懂Flask框架:从入门到实战的完整指南
前端·python·flask
Watermelo6173 小时前
极致的灵活度满足工程美学:用Vue Flow绘制一个完美流程图
前端·javascript·vue.js·数据挖掘·数据分析·流程图·数据可视化
门前云梦3 小时前
ollama+open-webui本地部署自己的模型到d盘+两种open-webui部署方式(详细步骤+大量贴图)
前端·经验分享·笔记·语言模型·node.js·github·pip
Micro麦可乐3 小时前
前端拖拽排序实现详解:从原理到实践 - 附完整代码
前端·javascript·html5·拖拽排序·drop api·拖拽api
Watermelo6173 小时前
Web Worker:让前端飞起来的隐形引擎
前端·javascript·vue.js·数据挖掘·数据分析·node.js·es6
Micro麦可乐3 小时前
前端与 Spring Boot 后端无感 Token 刷新 - 从原理到全栈实践
前端·spring boot·后端·jwt·refresh token·无感token刷新
Heidi__3 小时前
前端数据缓存机制详解
前端·缓存