React应用中如何判断用户已滚动至屏幕25%位置

25%滚动节点的计算逻辑非常明确，你只需要用以下公式计算触发阈值即可：

触发阈值 = (页面总高度 - 窗口可视高度) * 0.25
当当前滚动距离window.scrollY大于等于触发阈值时，就代表用户滚动到了指定位置。

用useEffect绑定滚动监听，搭配防抖优化性能，完整示例代码如下：

import { useState, useEffect } from 'react'

function App() {
  const [showModal, setShowModal] = useState(false)

  useEffect(() => {
    // 防抖函数，避免滚动事件频繁触发判断
    let timer = null
    const handleScroll = () => {
      if (timer) clearTimeout(timer)
      timer = setTimeout(() => {
        // 已经触发过弹窗就不再判断，可根据需求调整
        if (showModal) return
        const totalScrollable = document.body.scrollHeight - window.innerHeight
        const triggerPoint = totalScrollable * 0.25
        if (window.scrollY >= triggerPoint) {
          setShowModal(true)
        }
      }, 100)
    }

    window.addEventListener('scroll', handleScroll)
    // 组件卸载时移除监听，避免内存泄漏
    return () => {
      window.removeEventListener('scroll', handleScroll)
      if (timer) clearTimeout(timer)
    }
  }, [showModal])

  return (
    <div style={{height: '200vh'}}>
      {/* 你的页面内容 */}
      {showModal && <div>这里是你的弹窗组件</div>}
    </div>
  )
}

export default App

• 如果你是在页面内的局部滚动容器中实现该逻辑，只需要将window替换为对应滚动容器的DOM实例，通过useRef绑定容器即可，对应参数调整为：
  容器可滚动高度 = 容器scrollHeight - 容器clientHeight
  容器滚动距离 = 容器scrollTop
• 如果需要滚动到当前视口高度的25%（而非总可滚动高度的25%），直接把触发阈值改成window.innerHeight * 0.25即可。

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