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

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

最近在工作中有一个版本对比的需求，左右两边的展示不同的版本，在滚动左边版本的时候右边版本也随之滚动。当时做的时候准备打算用一个大盒子包括这两个盒子，滚动的时候滚动最外面的大盒子，后来因为组长规划的是两个版本用一个组件，传一个叫做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"><CompareVersionposition={'left'}data ={leftData}/><CompareVersionposition={'right'}data = {rightData}/></div>);
}

import React, { useEffect } from "react";
import { emitter } from "../Emitter";
import "./index.css";export default function (props) {const { position, data } = props;const indexInfoScrollTop = (dom, position) => {if (dom) {dom.scrollTop = position;}};useEffect(() => {const indexInfoDom = ElementById(`compare-version-${position}`);indexInfoDom.addEventListener('scroll', () => {if (position === 'left') {it('scrollLeft', { position: indexInfoDom.scrollTop });} else {it('scrollRight', { position: indexInfoDom.scrollTop });}});if (position === 'right') {('scrollLeft', ({ position }) => {indexInfoScrollTop(indexInfoDom, position);});} else {('scrollRight', ({ position }) => {indexInfoScrollTop(indexInfoDom, position);});}return () => {veEventListener('scroll', () => {});};});return <div className="compareVersion-page" id = {`compare-version-${position}`}>{data}{data}{data}{data}{data}{data}{data}{data}{data}{data}{data}{data}{data}</div>;
}

实现思路是通过监听两个盒子的滚动事件，如果左边的盒子的滚动高度发生变化，就向父组件传递出自己的滚动高度，然后父组件将滚动高度再传递给另一个兄弟组件，兄弟组件再将自己盒子的滚动高度设置和传递过来的高度一样。这样就实现了同步滚动的说法，但是自我感觉有些麻烦，各位如果有更好的实现方式，请留言告知，这个实现方法是我为了完成任务，强行实现的，肯定存在很多不足，请各位指正。