react 列表滚动触发回调

//* 函数组件的 js 部分
  
// 目标节点：ref={r => { targetRef.current = r }}
  const targetRef = useRef(null);
  // 触底允许的偏移值
  const touchOffset = 100;
  // 是否已经触发触底回调：touchedCallBack
  const [isTCB, setIsTCB] = useState(false);
  
// 滑动事件：onScrollCapture={onScrollCapture}
  const onScrollCapture = () => {
    const { scrollTop, clientHeight, scrollHeight } = targetRef.current;
    // 是否已触底（含偏移）
    const isTouched = (touchOffset + scrollTop + clientHeight) >= scrollHeight;
    // 达到了触底的范围 && 并且没有触发过触底回调
    if (isTouched && !isTCB) {
      onTouchBottom(); // 需要在触底时触发的回调函数 
      setIsTCB(true);
    }
    // 处于未触底的范围 && 已经触发过触底回调
    else if (!isTouched && isTCB) {
      setIsTCB(false);
    }
  };

  //* 标签部分（div 属性设置）
  <div ref={targetRef} onScrollCapture={onScrollCapture}></div>