多div同步滚动问题：解决scrollLeft触发监听循环的方案

核心思路是通过标志位拦截程序触发的scroll事件，只响应用户手动触发的滚动操作，避免设置scrollLeft时引发的循环调用。

实现代码 #

let isSyncing = false;

document.querySelectorAll('.rowDataDiv').forEach(el => {
  el.addEventListener('scroll', e => {
    // 如果正在同步，直接返回，避免循环
    if (isSyncing) return;
    
    isSyncing = true;
    // 获取当前滚动的位置
    const scrollLeft = e.target.scrollLeft;
    // 同步所有目标div的滚动位置
    document.querySelectorAll('.rowDataDiv').forEach(targetEl => {
      // 跳过当前触发滚动的元素，减少不必要的赋值操作
      if (targetEl !== e.target) {
        targetEl.scrollLeft = scrollLeft;
      }
    });
    isSyncing = false;
  });
});

代码说明 #

• isSyncing 作为同步状态标志：用户手动滚动div时，标志位设为true，此时程序设置其他div的scrollLeft会触发它们的scroll事件，但因为标志位为true，会直接跳过同步逻辑，彻底避免循环。
• 跳过当前触发滚动的元素：减少一次无意义的scrollLeft赋值，小幅提升性能。
• 兼容全场景滚动操作：不管是鼠标滚轮、拖动滚动条还是键盘方向键触发的滚动，都能正常同步，不受Chrome平滑滚动特性的干扰。

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