React实现滚动效果时报TypeError: Cannot set property 'onscroll' of null如何解决

报错根因 #

你遇到的TypeError: Cannot set property 'onscroll' of null报错，本质是你尝试绑定滚动事件的DOM元素还未完成挂载，拿到的元素值为null导致赋值失败。这种情况在React中非常常见，和React的渲染执行顺序有关。

React中监听滚动事件的正确方式 #

React不推荐直接用原生DOM选择器+onscroll赋值的方式绑定事件，正确实现分两种场景：

1. 监听全局window滚动 #

在useEffect钩子中完成事件绑定和解绑，useEffect会在DOM挂载完成后执行，能保证拿到的对象有效：

import { useEffect } from 'react'

function YourComponent() {
  useEffect(() => {
    const handleScroll = () => {
      // 写入你的滚动逻辑：计算滚动距离、匹配对应内容索引、切换左侧图片
    }
    // 绑定滚动事件
    window.addEventListener('scroll', handleScroll)
    // 组件卸载时解绑事件，避免内存泄漏
    return () => window.removeEventListener('scroll', handleScroll)
  }, [])

  // 组件其他逻辑
  return <>{/* 你的页面结构 */}</>
}

2. 监听指定滚动容器的滚动 #

如果滚动区域不是整个页面，而是页面内的某个容器，要用useRef绑定DOM元素，不要用原生DOM选择器：

import { useRef, useEffect } from 'react'

function YourComponent() {
  // 创建ref用于关联滚动容器
  const scrollContainerRef = useRef(null)

  useEffect(() => {
    const container = scrollContainerRef.current
    // 先判空，避免元素未挂载时报错
    if (!container) return
    const handleScroll = () => {
      // 可通过container.scrollTop拿到容器滚动距离
      // 计算右侧内容块位置，匹配索引后更新左侧图片
    }
    container.addEventListener('scroll', handleScroll)
    return () => container.removeEventListener('scroll', handleScroll)
  }, [])

  return (
    <div style={{ display: 'flex' }}>
      {/* 左侧图片区域 */}
      <div className="left-img-area">{/* 图片渲染逻辑 */}</div>
      {/* 右侧滚动容器，绑定ref */}
      <div 
        ref={scrollContainerRef} 
        style={{ height: '100vh', overflowY: 'auto' }}
        className="right-content-area"
      >
        {/* 右侧滚动内容 */}
      </div>
    </div>
  )
}

额外优化建议 #

• 滚动事件触发频率极高，建议给handleScroll加节流处理，可直接用lodash.throttle或者手动实现节流逻辑，减少不必要的计算和渲染，提升交互流畅度。
• 不要用onscroll直接赋值的方式绑定事件，用addEventListener可以避免覆盖其他绑定在同个元素上的滚动事件，也更方便后续解绑。
• 左右联动的逻辑可以提前计算好所有右侧内容块的offsetTop值存成数组，滚动时直接匹配当前滚动距离落在哪个区间，就能快速拿到对应要展示的图片索引，性能比每次滚动都查询DOM位置更好。

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