前端实现两个盒子同步滚动

最近在工作中有一个版本对比的需求，左右两边的展示不同的版本，在滚动左边版本的时候右边版本也随之滚动。当时做的时候准备打算用一个大盒子包括这两个盒子，滚动的时候滚动最外面的大盒子，后来因为组长规划的是两个版本用一个组件，传一个叫做position的props，再传不同版本的数据就可以。后来考虑了一下，在我的知识范围里面如果不能用盒子包括，就只能用事件监听加上操纵dom了。下面是我的实现方法。

import React,{
   useEffect} from "react";
import CompareVersion from './CompareVersion'

import './Test.css'
export default function Test() {
   


  const leftData = '我是左边我是左边我是左边我是左边我是左边我是左边我是左边我是左边我是左边我是左边我是左边我是左边我是左边我是左边我是左边我是左边我是左边我是左边我是左边我是左边我是左边我是左边我是左边我是左边我是左边我是左边'
  const rightData= '我是右边我是右边我是右边我是右边我是右边我是右边我是右边我是右边我是右边我是右边我是右边我是右边我是右边我是右边我是右边我是右边我是右边我是右边我是右边我是右边我是右边我是右边我是右边我是右边我是右边我是右边'
  return (
    <div className="test-page">
      <CompareVersion
        position={
   'left'}
        data ={
   leftData}
      />
      <CompareVersion
        position={
   'right'}
        data = {
   rightData}<