如何实现两个元素同步滚动且避免滚动事件互相触发？

你现有代码的问题是会出现循环触发：修改A元素的滚动位置会触发A的滚动事件，反过来又修改B的滚动位置触发B的滚动事件，最终形成死循环，还会伴随滚动抖动的问题。

最简单的解决方案是引入同步状态锁，标记当前滚动是否为代码主动触发的同步行为，拦截非用户主动触发的同步逻辑，修改后的代码如下：

// 全局同步锁：true表示当前是程序触发的滚动，false为用户手动触发的滚动
let isSyncing = false;

$('.mygrid').on('scroll', function () {
  if (isSyncing) return;
  isSyncing = true;
  $('.mygridheading').scrollLeft($(this).scrollLeft());
  isSyncing = false;
});

$('.mygridheading').on('scroll', function () {
  if (isSyncing) return;
  isSyncing = true;
  $('.mygrid').scrollLeft($(this).scrollLeft());
  isSyncing = false;
});

方案说明 #

• 只有用户手动滚动元素触发的滚动事件，才会执行同步逻辑修改另一个元素的滚动位置
• 代码主动修改滚动位置触发的滚动事件，会被isSyncing判断直接拦截，不会反向触发同步，彻底解决循环调用问题
• 该方案性能开销极低，不需要频繁绑定解绑事件，兼容所有主流浏览器

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