在React组件中如何同步两个div的scrollLeft属性实现水平滚动同步

数据老陈

2026-10-18

问题根因

scrollLeft 属于DOM元素的实例属性，不是React组件的可传递props，直接写在JSX标签上不会生效
你把scrollLeft绑定在了内部内容div上，实际需要控制的是外层带overflow:scroll的可滚动容器的scrollLeft属性

修复方案

通过useRef获取两个可滚动容器的真实DOM实例，配合useEffect监听offsetX状态变化，主动修改两个容器的scrollLeft值即可。

const { useState, useRef, useEffect } = require('react');

const MainComponent = () => {
  const [offsetX, setOffsetX] = useState(0);
  // 给两个滚动容器声明ref
  const scrollContainer1 = useRef(null);
  const scrollContainer2 = useRef(null);

  function reactToScrolling(e) {
    // 避免代码设置scrollLeft时重复触发更新，加一层判断减少不必要的重渲染
    if (e.target.scrollLeft !== offsetX) {
      setOffsetX(e.target.scrollLeft);
    }
  }

  // 监听offsetX变化，同步到两个滚动容器
  useEffect(() => {
    if (scrollContainer1.current) {
      scrollContainer1.current.scrollLeft = offsetX;
    }
    if (scrollContainer2.current) {
      scrollContainer2.current.scrollLeft = offsetX;
    }
  }, [offsetX]);
  
  return (
    <>
      {/* 给外层滚动容器绑定ref，如果是表头的话可以加overflowY: 'hidden' 禁止垂直滚动 */}
      <div 
        ref={scrollContainer1}
        style={{ height:'200pt', width:'800pt', overflow:'scroll'}} 
        onScroll={reactToScrolling}
      >
        <div style={{ height:'600pt', width:'1600pt', backgroundColor:'red' }}>
          ...
        </div>
      </div>
      <div 
        ref={scrollContainer2}
        style={{ height:'200pt', width:'800pt', overflow:'scroll'}} 
        onScroll={reactToScrolling}
      >
        <div style={{ height:'600pt', width:'1600pt', backgroundColor:'blue' }}>
          ...
        </div>
      </div>
    </>
  )
};

export default MainComponent;