如何检测滚动是否发生在ref为options的div内？是否有可用的Hook？

滚动事件捕获实现方式 #

首先要确认你的div已配置可滚动样式：需要设置overflow: scroll/overflow: auto，同时有固定高度/最大高度限制，否则内容不会溢出也就不会触发滚动事件。

方案1：直接绑定React合成事件（最推荐） #

React原生支持div的onScroll事件绑定，不需要额外通过ref操作DOM，直接绑定即可，React会自动处理事件的绑定和解绑逻辑：

<div 
  ref={options}
  onScroll={(e) => {
    // 可直接获取滚动相关属性
    console.log('当前滚动距离顶部高度：', e.currentTarget.scrollTop)
  }}
>
  {content}
</div>

方案2：通过ref手动绑定监听（适合特殊场景） #

如果必须通过ref来绑定滚动监听，可以配合useEffect实现，注意要在组件卸载时解绑事件避免内存泄漏：

import { useEffect } from 'react'

// 组件内部逻辑
useEffect(() => {
  const targetDom = options.current
  if (!targetDom) return

  const handleScroll = (e) => {
    console.log('滚动触发', e.target.scrollTop)
  }
  // 绑定滚动事件
  targetDom.addEventListener('scroll', handleScroll)
  // 卸载时解绑
  return () => {
    targetDom.removeEventListener('scroll', handleScroll)
  }
}, [])

注意：滚动事件本身不支持冒泡，如果你要监听的是该div内部其他子元素的独立滚动行为，需要直接给对应的子元素绑定滚动事件，绑定在当前父div上无法捕获到子元素的滚动事件。

React专属Hook相关说明 #

React没有内置专门用来监听元素滚动的Hook，上面两种是官方推荐的标准实现方式。如果需要复用滚动监听逻辑，可以自行封装自定义Hook，示例如下：

// 封装自定义滚动监听Hook
const useElementScroll = (ref, callback) => {
  useEffect(() => {
    const element = ref.current
    if (!element || typeof callback !== 'function') return

    const handleScroll = (e) => callback(e)
    element.addEventListener('scroll', handleScroll)
    return () => element.removeEventListener('scroll', handleScroll)
  }, [ref, callback])
}

// 组件内使用
useElementScroll(options, (e) => {
  console.log('滚动触发', e.target.scrollTop)
})

内容的提问来源于stack exchange，提问作者nwerigbxb2