如何在 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: scroll 或 overflow: auto。

2. window 的 scroll 事件需要用 window.addEventListener 绑定：

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

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