在没有缓慢的滚轮的情况下同步Div的滚动

Question

我已经在一个页面上成功获得了两个div，每个div都有一个滚动条，并且使用jQuery，当一个div滚动时，另一个div相应滚动。

$('#left').scroll(function () {
    $('#right').scrollTop($(this).scrollTop());
});

$('#right').scroll(function () {
    $('#left').scrollTop($(this).scrollTop());
});

这可以正常工作，因为你使用键盘或点击滚动条并拖动进行滚动，但如果你使用鼠标滚轮，它的速度非常慢，我认为应该是这样的事实：那里有反馈循环＆＃39;。

有没有办法可以阻止这个循环，以便用鼠标滚轮滚动工作顺利？

此处有fiddle显示问题。

Answer 1

问题是，scroll上有divs个事件监听器。那个事件正在反弹。一个工作就是用off解除另一个听众的绑定，然后重新分配。

但是应该有一个短暂的延迟，因为浏览器需要一些时间将scrollTop设置为新值。一种方法是使用setTimeout来执行此任务。

// a helper variable
var timeout;

$('#left, #right').on("scroll", function callback() {
    // clear the 'timeout' every 'scroll' event call
    // to prevent re-assign 'scroll' event to other element
    // before finished scrolling
    clearTimeout(timeout);

    // get the used elements
    var source = $(this),
        target = $(source.is("#left") ? '#right' : '#left');

    // remove the callback from the other 'div' and set the 'scrollTop'
    target.off("scroll").scrollTop(source.scrollTop());

    // create a new 'timeout' and reassign 'scroll' event
    // to other 'div' on 100ms after the last event call
    timeout = setTimeout(function() {
        target.on("scroll", callback);
    }, 100);
});

工作示例：

＆＃13;

＆＃13;

// a helper variable
var timeout;

$('#left, #right').on("scroll", function callback() {
    // clear the 'timeout' every 'scroll' event call
    // to prevent re-assign 'scroll' event to other element
    // before finished scrolling
		clearTimeout(timeout);

    // get the used elements
		var source = $(this),
        target = $(source.is("#left") ? '#right' : '#left');

    // remove the callback from the other 'div' and set the 'scrollTop'
    target.off("scroll").scrollTop(source.scrollTop());

    // create a new 'timeout' and reassign 'scroll' event
    // to other 'div' on 100ms after the last event call
    timeout = setTimeout(function() {
        target.on("scroll", callback);
    }, 100);
});

＆＃13;

div {
  width: 50%;
  height: 200px;
  overflow-y: scroll;
}

#left {
  float: left;
}

#right {
  float: right;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="left">
  <p>Content Here</p>
  <p>Content Here</p>
  <p>Content Here</p>
  <p>Content Here</p>
  <p>Content Here</p>
  <p>Content Here</p>
  <p>Content Here</p>
  <p>Content Here</p>
  <p>Content Here</p>
  <p>10th P Tag</p>
  <p>Content Here</p>
  <p>Content Here</p>
  <p>Content Here</p>
  <p>Content Here</p>
  <p>Content Here</p>
  <p>Content Here</p>
  <p>Content Here</p>
  <p>Content Here</p>
  <p>Content Here</p>
  <p>20th P Tag</p>
  <p>Content Here</p>
  <p>Content Here</p>
  <p>Content Here</p>
  <p>Content Here</p>
  <p>Content Here</p>
  <p>Content Here</p>
  <p>Content Here</p>
  <p>Content Here</p>
  <p>Content Here</p>
  <p>30th P Tag</p>
</div>
<div id="right">
  <p>Content Here</p>
  <p>Content Here</p>
  <p>Content Here</p>
  <p>Content Here</p>
  <p>Content Here</p>
  <p>Content Here</p>
  <p>Content Here</p>
  <p>Content Here</p>
  <p>Content Here</p>
  <p>10th P Tag</p>
  <p>Content Here</p>
  <p>Content Here</p>
  <p>Content Here</p>
  <p>Content Here</p>
  <p>Content Here</p>
  <p>Content Here</p>
  <p>Content Here</p>
  <p>Content Here</p>
  <p>Content Here</p>
  <p>20th P Tag</p>
  <p>Content Here</p>
  <p>Content Here</p>
  <p>Content Here</p>
  <p>Content Here</p>
  <p>Content Here</p>
  <p>Content Here</p>
  <p>Content Here</p>
  <p>Content Here</p>
  <p>Content Here</p>
  <p>30th P Tag</p>
</div>

＆＃13;

＆＃13;

＆＃13;

<强> jsfiddle