如何实现多个可滚动Div元素之间的比例同步滚动效果

在网页布局中，我们可能希望左侧目录和右侧内容、或者上下两个预览框在滚动时保持相同的阅读进度比例。通过原生JavaScript监听scroll事件并计算滚动百分比，就能让多个可滚动Div元素实现比例同步滚动。

实现原理

每个Div的滚动比例可以用 scrollTop / (scrollHeight - clientHeight) 来表示。当用户滚动某个源Div时，我们计算出它的滚动比例，再把这个比例乘到目标Div的可滚动距离上，从而设置目标Div的 scrollTop。

基础HTML结构

下面准备两个固定高度并可滚动的Div：

<div id="boxA" style="height:200px;overflow:auto;border:1px solid #ccc;">
  <div style="height:600px;">内容A</div>
</div>
<div id="boxB" style="height:200px;overflow:auto;border:1px solid #ccc;margin-top:10px;">
  <div style="height:600px;">内容B</div>
</div>

JavaScript同步逻辑

使用下面的脚本让 boxA 和 boxB 按比例同步滚动：

// 获取两个Div元素
var boxA = document.getElementById('boxA');
var boxB = document.getElementById('boxB');

// 标记是否正在同步，避免回环触发
var syncing = false;

// 计算并设置目标滚动位置
function syncScroll(source, target) {
  if (syncing) return;
  syncing = true;
  var maxSource = source.scrollHeight - source.clientHeight;
  var maxTarget = target.scrollHeight - target.clientHeight;
  var ratio = maxSource > 0 ? source.scrollTop / maxSource : 0;
  target.scrollTop = ratio * maxTarget;
  // 释放标记
  requestAnimationFrame(function() {
    syncing = false;
  });
}

// 绑定滚动事件
boxA.addEventListener('scroll', function() {
  syncScroll(boxA, boxB);
});
boxB.addEventListener('scroll', function() {
  syncScroll(boxB, boxA);
});

注意事项

• 如果Div内容高度小于容器高度，滚动距离为0，此时比例计算应做容错。
• 双向绑定时要用标记变量或 requestAnimationFrame 防止事件互相触发造成抖动。
• 若Div内包含图片，需在图片加载完成后重新计算 scrollHeight，否则比例会偏差。

小结

多个可滚动Div的比例同步滚动并不复杂，核心是统一用滚动百分比来驱动其他元素的 scrollTop。掌握这个方法后，你可以轻松扩展到三个或更多Div的联动场景中。

Div滚动同步比例滚动JavaScript修改时间：2026-07-29 10:42:21