同步两个元素之间的滚动条 - jQuery

Question

如何在不递归调用每个事件的情况下同步两个元素之间的滚动条？

通常您会期望以下代码：

$div1.scroll(function() { $div2.scrollTop($div1.scrollTop()); }); $div2.scroll(function(){ $div1.scrollTop($div2.scrollTop()); });

但在这种情况下，如果您将 $div1 滚动 1px，它也会滚动 $div2 1px，这将提示触发 $div2 滚动事件并将滚动位置重新应用到 $div1。 虽然这似乎不是问题，但当将此代码应用于页面并且您自然地使用鼠标滚动时，它会以 1px 的增量滚动，因为处理程序互相调用并且不允许滚动流动。

那么，你会如何解决这个问题？

示例：https://jsfiddle.net/axtn/a91fsar3/2

Answer 1

找到一个好的解决方案。去抖动就可以了。

您可以结合使用计时器和布尔值来确保元素正在被用户滚动。因此，当快速连续触发滚动事件时（例如当用户向下滚动时），它可以防止处理程序递归调用彼此。以下代码可以解决问题：

var userScroll1 = true;
var userScroll2 = true;
var timer;

$div1.scroll(function() {
  if(userScroll2) {
    userScroll1 = false;
    clearTimeout(timer);
    $div2.scrollTop($div1.scrollTop());
    timer = setTimeout(function() {
       userScroll1 = true;
     }, 100);
  }
});
$div2.scroll(function(){
  if(userScroll1) {
    userScroll2 = false;
    clearTimeout(timer);
    $div1.scrollTop($div2.scrollTop());
    timer = setTimeout(function() {
       userScroll2 = true;
     }, 100);
  }
});

检查正常运行的 jsbin：https://jsfiddle.net/axtn/a91fsar3

同步两个元素之间的滚动条 - jQuery

Synchronize scrollbars between two elements - jQuery

javascript

jquery

scroll

synchronization

onscroll