实现左右并排div同步滚动功能（类似Beyond Compare滚动）

嘿，这个需求我之前做对比类工具的时候正好实现过！Beyond Compare的同步滚动确实能极大提升内容对比的体验，用原生JavaScript就能轻松搞定，不用依赖任何框架。我给你两种方案，你可以根据自己的场景选择：

方案1：基础像素同步（内容高度一致时首选） #

这种方案适合左右div内容高度差不多的情况，直接同步滚动的像素值，简单直观。

完整代码示例 #

<!-- 先给两个div加个容器让它们并排显示 -->
<div class="compare-container">
  <div id="leftdiv" class="scrollable-div">
    <p>Left Content Line 1</p>
    <p>Left Content Line 2</p>
    <p>Left Content Line 3</p>
    <p>Left Content Line 4</p>
    <p>Left Content Line 5</p>
    <p>Left Content Line 6</p>
    <p>Left Content Line 7</p>
    <p>Left Content Line 8</p>
    <p>Left Content Line 9</p>
    <p>Left Content Line 10</p>
    <p>Left Content Line 11</p>
    <p>Left Content Line 12</p>
  </div>
  <div id="rightdiv" class="scrollable-div">
    <p>Right Content Line 1</p>
    <p>Right Content Line 2</p>
    <p>Right Content Line 3</p>
    <p>Right Content Line 4</p>
    <p>Right Content Line 5</p>
    <p>Right Content Line 6</p>
    <p>Right Content Line 7</p>
    <p>Right Content Line 8</p>
    <p>Right Content Line 9</p>
    <p>Right Content Line 10</p>
    <p>Right Content Line 11</p>
    <p>Right Content Line 12</p>
  </div>
</div>

<style>
.compare-container {
  display: flex;
  gap: 20px; /* 两个div之间的间距，可按需调整 */
}

.scrollable-div {
  width: 300px;
  height: 300px;
  overflow-y: scroll;
  border: 1px solid #ccc;
  padding: 10px;
}
</style>

<script>
const leftDiv = document.getElementById('leftdiv');
const rightDiv = document.getElementById('rightdiv');

// 滚动左侧时同步右侧
leftDiv.addEventListener('scroll', () => {
  rightDiv.scrollTop = leftDiv.scrollTop;
});

// 可选：如果需要滚动右侧时也同步左侧，就加上这段
rightDiv.addEventListener('scroll', () => {
  leftDiv.scrollTop = rightDiv.scrollTop;
});
</script>

原理说明 #

核心就是利用元素的scrollTop属性——这个属性表示元素内容向上滚动的像素值。当监听其中一个div的滚动事件时，把它的scrollTop值赋值给另一个div，就能实现同步滚动了。

方案2：比例同步（内容高度不同时首选） #

如果左右div的内容高度差异较大，像素同步会出现一方先滚到底、另一方还没到的情况，这时候用比例同步更贴合Beyond Compare的体验：保持两个div的滚动进度一致（比如左边滚到50%，右边也滚到50%）。

修改后的JS代码 #

把方案1里的JS部分换成下面这段即可：

const leftDiv = document.getElementById('leftdiv');
const rightDiv = document.getElementById('rightdiv');

// 左侧滚动时同步右侧比例
leftDiv.addEventListener('scroll', () => {
  // 计算左侧的滚动比例：已滚动高度 / 可滚动总高度
  const leftScrollRatio = leftDiv.scrollTop / (leftDiv.scrollHeight - leftDiv.clientHeight);
  // 根据比例计算右侧应该滚动的高度
  rightDiv.scrollTop = leftScrollRatio * (rightDiv.scrollHeight - rightDiv.clientHeight);
});

// 右侧滚动时同步左侧比例
rightDiv.addEventListener('scroll', () => {
  const rightScrollRatio = rightDiv.scrollTop / (rightDiv.scrollHeight - rightDiv.clientHeight);
  leftDiv.scrollTop = rightScrollRatio * (leftDiv.scrollHeight - leftDiv.clientHeight);
});

原理说明 #

这里用到了两个关键属性：

• scrollHeight：元素内容的总高度（包括超出可视区域的部分）
• clientHeight：元素的可视高度
  通过scrollTop / (scrollHeight - clientHeight)可以计算出当前的滚动进度比例（0到1之间），再用这个比例乘以另一个div的可滚动总高度，就能实现按比例同步滚动了。

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