1. 多Div同步滚动的挑战
在Web开发中，有时我们需要实现多个独立的滚动区域（div元素）能够根据彼此的滚动位置按比例同步滚动。例如，当用户滚动divA时，divB和divC也应同步滚动到相应的比例位置。
一个常见的初步尝试是为每个div添加scroll事件监听器，并在事件触发时计算滚动百分比，然后将该百分比应用到其他div的scrollTop属性上。为了避免无限循环触发（当divA滚动导致divB滚动，divB的滚动又触发其监听器，再次尝试滚动divA，如此往复），开发者通常会引入一个全局的ignoreEvent标志。然而，这种简单标志位在涉及三个或更多div的复杂场景中，往往会因为事件处理时序的细微差异而导致冲突、卡顿或“闪烁”的体验。
问题在于，当一个div的scrollTop被程序性地改变时，它会立即触发该div的scroll事件。如果ignoreEvent标志在所有相关事件处理完成之前没有被正确重置，或者在多于两个div的场景下，一个div的程序性滚动可能会在另一个div的事件处理中途被捕获，从而打破同步逻辑。
2. 核心原理：主滚动器（Main Scroller）机制
为了解决上述冲突，我们可以引入“主滚动器”的概念。其核心思想是：在任何给定时刻，只有一个div被认为是用户主动滚动的“主滚动器”，其他div则被动地跟随其滚动。当一个div被标记为主滚动器时，其他div的scroll事件监听器将暂时忽略其自身的程序性滚动，直到主滚动器的操作完成。
立即学习“Java免费学习笔记（深入）”；
关键步骤如下：
- 标识主滚动器：当一个div触发scroll事件时，如果当前没有主滚动器被激活，则将这个div标记为当前的主滚动器。
- 防止递归触发：如果scroll事件触发时已经存在一个主滚动器，那么当前的事件将被忽略，以防止由程序性scrollTop修改导致的循环触发。
- 计算并应用滚动比例：获取主滚动器的当前滚动百分比，并将其应用到所有其他非主滚动器的div上。
- 异步重置主滚动器：最关键的一步是，在所有程序性滚动操作完成后，将主滚动器标志重置为null。为了确保这一点，我们使用window.setTimeout(() => { mainScroller = null; }, 0);。setTimeout(0)会将重置操作推入事件队列的末尾，确保在当前事件循环中由scrollTop修改引起的所有scroll事件都处理完毕后，才允许新的主滚动器被指定。这有效地避免了在同一事件循环中，程序性滚动再次触发监听器，从而导致冲突。
3. 实现步骤与代码解析
下面我们将通过HTML、CSS和JavaScript代码来详细实现这一机制。
3.1 HTML 结构
我们创建三个具有可滚动内容的div元素，它们都包含在同一个容器中。
<!DOCTYPE html>
<html>
<head>
<title>多Div比例同步滚动</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="./src/styles.css" />
</head>
<body>
<div id="container">
<div id="a">
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>
<div id="b">
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>
<div id="c">
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>
</div>
<script src="src/index.js"></script>
</body>
</html>3.2 CSS 样式
为div元素设置固定的高度和overflow: scroll属性，使其可滚动。
#container {
font-family: sans-serif;
width: 100%;
height: 600px; /* 容器高度 */
background: #ccc;
display: flex;
gap: 20px; /* Div之间的间距 */
}
#a,
#b,
#c {
width: 300px;
height: 600px; /* Div的高度 */
overflow: scroll; /* 允许滚动 */
}
#a {
background-color: red;
}
#b {
background-color: blue;
}
#c {
background-color: green;
}
.content {
width: 150px;
height: 150px;
background-color: white;
}
.content + .content {
margin-top: 20px;
}3.3 JavaScript 逻辑
这是实现同步滚动的核心部分。
let mainScroller = null; // 用于标识当前的主滚动器
/**
* 计算元素的滚动百分比。
* @param {HTMLElement} element - 要计算的DOM元素。
* @returns {number} 滚动百分比（0到1之间）。
*/
function getScrollPercentage(element) {
// 滚动条顶部位置 / (可滚动区域总高度 - 可视区域高度)
const scrollPercentage =
element.scrollTop / (element.scrollHeight - element.offsetHeight);
return scrollPercentage;
}
// 获取DOM元素
const divA = document.getElementById('a');
const divB = document.getElementById('b');
const divC = document.getElementById('c');
// 将所有可滚动元素放入一个数组
/** @type {HTMLDivElement[]} */
const scrollers = [divA, divB, divC];
// 为每个可滚动元素添加事件监听器
scrollers.forEach((thisScroller) => {
// 预先缓存其他滚动器，避免在每次滚动时重复创建数组
const anothers = scrollers.filter((scroller) => scroller !== thisScroller);
thisScroller.addEventListener('scroll', function () {
// 如果已经有主滚动器在活动，则当前事件是程序性触发的，直接返回，不做处理
if (mainScroller) {
return;
}
// 标记当前滚动器为主滚动器
mainScroller = thisScroller;
// 获取主滚动器的滚动百分比
const scrolledPercentage = getScrollPercentage(thisScroller);
// 根据主滚动器的百分比，同步其他滚动器
anothers.forEach((scroller) => {
// 计算其他滚动器应滚动到的scrollTop值
const scrollTop =
(scroller.scrollHeight - scroller.offsetHeight) * scrolledPercentage;
scroller.scrollTop = scrollTop; // 设置滚动位置
});
// 使用setTimeout(0)将mainScroller的重置操作推迟到当前事件循环的末尾
// 确保所有由程序性scrollTop修改引发的scroll事件都已处理完毕
window.setTimeout(() => {
mainScroller = null; // 清除主滚动器标记
}, 0);
});
});4. 完整示例代码
将上述HTML、CSS和JavaScript代码分别保存为index.html、src/styles.css和src/index.js，即可运行查看效果。
5. 注意事项与优化
- setTimeout(0)的重要性：setTimeout(0)并非立即执行，而是将回调函数放入事件队列，在当前所有同步任务（包括由scrollTop改变触发的scroll事件）执行完毕后，才会在下一个事件循环中执行。这是解决多div同步滚动冲突的关键，它确保了mainScroller在正确的时间点被清除，从而避免了递归触发和卡顿。
- 性能考量：对于少量div（如本例中的三个），此方案性能良好。如果需要同步的div数量非常多，可能需要进一步优化，例如考虑使用requestAnimationFrame来批处理scrollTop的更新，以减少布局抖动。
- 滚动条可见性：确保所有div都有足够的内容来产生滚动条，否则同步效果将不明显。
- 兼容性：此方法使用纯JavaScript和DOM API，具有良好的浏览器兼容性。
- 用户体验：这种比例同步滚动提供了一种直观的用户体验，特别适用于需要同时展示不同长度但内容相关的区域（如代码文件和预览、长文本和注释区等）。
通过这种主滚动器和异步重置的机制，我们能够以纯JavaScript实现多个div之间平滑、无冲突的比例同步滚动，极大地提升了用户交互体验。
