当前位置: 首页 > news >正文

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

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


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

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 (<divonScroll={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 绑定:

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.dtcms.com/a/231560.html

相关文章:

  • 导出onnx的两种方法
  • 在本地查看服务器上的TensorBoard
  • 2025年- H65-Lc173--347.前k个高频元素(小根堆,堆顶元素是当前堆元素里面最小的)--Java版
  • 洛谷P1591阶乘数码
  • JavaWeb简介
  • 二维 根据矩阵变换计算镜像旋转角度
  • 【LLM大模型技术专题】「入门到精通系列教程」LangChain4j与Spring Boot集成开发实战指南
  • 记录一下centos8安装nginx并部署使用
  • 使用 Python 的 psutil 库进行系统资源监控
  • Apparent connection leak detected问题排查
  • Java Lombok @Data 注解用法详解
  • Reids 如何处理缓存穿透、缓存击穿、缓存雪崩问题?
  • 常用的Docker命令
  • 通用寄存器的 “不通用“ 陷阱:AX/CX/DX 的寻址禁区与突围之道
  • 代码训练LeetCode(22)研究者H指数
  • 防止网站被iframe嵌套的安全防护指南
  • 多线程编程技术解析及示例:pthread_cond_timedwait、pthread_mutex_lock 和 pthread_mutex_trylock
  • 数学知识体系难易程度表及关系
  • 蓝牙防丢器应用方案
  • 贝叶斯优化+LSTM+时序预测=Nature子刊!
  • Elasticsearch的写入性能优化
  • 高速ADC数据格式与JESD204B IP数据格式映射关系
  • FART 精准脱壳:通过配置文件控制脱壳节奏与范围
  • AI,如何重构理解、匹配与决策?
  • Oracle数据库笔记
  • [C]extern声明变量报错:undefined reference终极解决方案
  • 第五期书生大模型实战营-《L1G1-玩转书生大模型 API 之 Browser-Use 实践》
  • 若依Ruoyi中优先从本地文件加载静态资源
  • 理解网络协议
  • 3D动画在微信小程序的实现方法