实现三个div等比例滚动同步，解决滚动卡顿冲突问题

问题根源 #

原方案的核心问题有两个：

1. 全局ignoreEvent标记无法区分滚动触发源，设置其他div的scrollTop时会触发它们的scroll事件，导致循环触发逻辑，引发冲突。
2. scroll事件触发频率过高（每秒可达数十次），频繁计算和修改scrollTop会导致浏览器频繁重绘重排，产生明显卡顿。

优化方案代码 #

// 节流函数：控制事件触发频率，避免频繁执行
function throttle(func, delay = 16) {
  let lastCall = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastCall >= delay) {
      lastCall = now;
      return func.apply(this, args);
    }
  };
}

// 计算滚动百分比的工具函数
function getScrollPercentage(element) {
  const scrollableHeight = element.scrollHeight - element.offsetHeight;
  // 避免除以0（当内容不足以滚动时）
  return scrollableHeight > 0 ? element.scrollTop / scrollableHeight : 0;
}

// 同步滚动的核心逻辑：从触发源同步到其他div
function syncScroll(fromElement, targetElements) {
  const scrollPercent = getScrollPercentage(fromElement);
  targetElements.forEach(target => {
    const scrollableHeight = target.scrollHeight - target.offsetHeight;
    // 设置scrollTop时，给目标元素添加标记，表明是被动滚动
    target._isSyncedScroll = true;
    target.scrollTop = scrollPercent * scrollableHeight;
    // 在下一轮事件循环清除标记，避免影响手动滚动
    setTimeout(() => { delete target._isSyncedScroll; }, 0);
  });
}

// 绑定滚动事件的通用函数
function bindScrollSync(element, others) {
  element.addEventListener('scroll', throttle(function() {
    // 如果是被动触发的滚动，直接跳过
    if (this._isSyncedScroll) return;
    syncScroll(this, others);
  }));
}

// 初始化三个div的滚动同步
const divs = [divA, divB, divC];
divs.forEach((div, index) => {
  const others = divs.filter((_, i) => i !== index);
  bindScrollSync(div, others);
});

关键优化点说明 #

• 节流函数：限制scroll事件的执行间隔为16ms（接近60帧每秒的刷新率），大幅减少计算和DOM操作的次数，缓解卡顿。
• 来源标记：通过给目标元素添加_isSyncedScroll临时标记，区分手动滚动和被动同步滚动，避免循环触发事件，彻底解决多元素间的滚动冲突。
• 逻辑封装：将重复的事件绑定、同步逻辑封装成通用函数，代码更简洁，后续新增div也能快速扩展。

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