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