如何使用jQuery实现两个独立水平滚动div的同步滚动？

当然可以实现双向同步滚动啦！你之前的代码问题出在监听的事件对象不对——你监听的是window的滚动，但实际上应该监听两个内容容器自身的scroll事件，这样当其中一个容器滚动时，另一个才会同步响应。

这里给你修正后的完整代码：

$(function() {
  // 提前获取两个滚动容器的jQuery对象，避免重复DOM查询
  const $contentTop = $(".content-top");
  const $contentBottom = $(".content-bottom");

  // 监听顶部容器的滚动，同步滚动位置到底部容器
  $contentTop.on("scroll", function() {
    $contentBottom.scrollLeft($(this).scrollLeft());
  });

  // 监听底部容器的滚动，同步滚动位置到顶部容器
  $contentBottom.on("scroll", function() {
    $contentTop.scrollLeft($(this).scrollLeft());
  });
});

代码说明： #

• 用$(function(){...})包裹代码，确保DOM元素加载完成后再执行，这比你之前的自执行函数更符合jQuery的最佳实践。
• 提前缓存两个容器的jQuery对象，避免每次滚动事件触发时都重新查询DOM，提升性能。
• 分别给两个容器绑定scroll事件，当任意一个容器滚动时，将它的scrollLeft（水平滚动距离）值设置给另一个容器，从而实现双向同步滚动。

另外要注意：确保两个容器的可滚动内容宽度是一致的，这样同步滚动时的视觉效果才会完全匹配哦。

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