如何在 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;
📌 注意事项
-
onScroll
只能监听滚动的容器,确保容器有overflow: scroll
或overflow: auto
。 -
window
的scroll
事件需要用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
如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!