如何用jQuery检测滚动停止？解决双滚动容器对齐问题

这个问题我之前也遇到过——实时监听scroll事件同步滚动确实容易因为触发太频繁导致卡顿，而且很难保证元素完全对齐。用滚动停止检测来做同步是个非常靠谱的优化方向，我给你详细讲讲怎么实现：

滚动停止的本质是「在一段连续的滚动事件后，超过指定时间没有新的滚动事件触发」，我们可以用防抖函数来实现这个逻辑：每次滚动时重置一个定时器，当定时器到期还没新的滚动事件，就判定为滚动停止，这时再执行两个容器的scrollLeft对齐操作。

方案1：基于jQuery实现（贴合你的现有代码） #

// 定义防抖函数，复用性更强
function debounce(func, delay = 300) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, arguments), delay);
  };
}

// 获取两个滚动容器
const $container1 = $('#container1');
const $container2 = $('#container2');
// 标记当前是否正在同步，避免循环触发
let isSyncing = false;

// 滚动停止后执行同步的逻辑
const syncScroll = () => {
  if (isSyncing) return;
  isSyncing = true;
  // 获取主动滚动容器的scrollLeft，同步到另一个容器
  const scrollLeft = $(this).scrollLeft();
  if ($(this).is($container1)) {
    $container2.scrollLeft(scrollLeft);
  } else {
    $container1.scrollLeft(scrollLeft);
  }
  isSyncing = false;
};

// 给两个容器绑定防抖后的滚动事件
$container1.on('scroll', debounce(syncScroll));
$container2.on('scroll', debounce(syncScroll));

方案2：原生JavaScript实现（性能更优） #

如果后续想脱离jQuery，原生写法也很类似：

function debounce(func, delay = 300) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => func.call(this), delay);
  };
}

const container1 = document.getElementById('container1');
const container2 = document.getElementById('container2');
let isSyncing = false;

const syncScroll = function() {
  if (isSyncing) return;
  isSyncing = true;
  const scrollLeft = this.scrollLeft;
  if (this === container1) {
    container2.scrollLeft = scrollLeft;
  } else {
    container1.scrollLeft = scrollLeft;
  }
  isSyncing = false;
};

container1.addEventListener('scroll', debounce(syncScroll));
container2.addEventListener('scroll', debounce(syncScroll));

• 防抖延迟时间：示例里用的300ms，你可以根据实际体验调整，比如200ms会更灵敏，400ms会更稳定。
• 避免循环触发：加入isSyncing标记是为了防止同步时另一个容器的scroll事件被触发，导致互相调用的死循环。
• 性能优化：相比实时同步，防抖只会在滚动停止后执行一次同步操作，大大减少了DOM操作次数，从根源解决卡顿问题，同时能保证两个容器的scrollLeft完全一致，元素自然对齐。

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