在两个元素之间同步滚动条-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