React中实时垂直视口滚动位置追踪功能失效问题求助

问题根源 #

你的代码无法正常运行的核心原因是：window.scrollY 是浏览器原生提供的非响应式变量，React的useEffect依赖对比机制不会主动监听这类原生值的变更，因此你写的第一个useEffect只会在组件首次挂载时执行1次，后续页面滚动时不会被触发，自然也就没法更新滚动位置。

修复方案 #

通过绑定原生scroll事件监听滚动动作，在事件回调中更新滚动位置即可，同时要记得组件卸载时移除事件监听避免内存泄漏：

import { useState, useEffect } from 'react'

const YourComponent = () => {
  // 初始化直接取当前滚动位置，避免首屏值为空
  const [verticalPosition, setVerticalPosition] = useState(window.scrollY)

  useEffect(() => {
    // 滚动更新回调
    const handleScroll = () => {
      setVerticalPosition(window.scrollY)
    }
    
    // 绑定滚动监听
    window.addEventListener('scroll', handleScroll)
    
    // 组件卸载时移除监听，防止内存泄漏
    return () => {
      window.removeEventListener('scroll', handleScroll)
    }
  }, [])

  useEffect(() => {
    console.log(verticalPosition)
    // 此处可执行你需要的UI变更逻辑
  }, [verticalPosition])

  // 其余组件逻辑
}

优化建议 #

滚动事件触发频率非常高，如果不需要毫秒级的精确更新，可以加节流逻辑降低更新频率，提升性能：

useEffect(() => {
  let ticking = false
  const handleScroll = () => {
    if (!ticking) {
      window.requestAnimationFrame(() => {
        setVerticalPosition(window.scrollY)
        ticking = false
      })
      ticking = true
    }
  }
  
  window.addEventListener('scroll', handleScroll)
  return () => window.removeEventListener('scroll', handleScroll)
}, [])

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