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

Question

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

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

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

这工作得很好沿着你使用键盘或点击滚动条拖动做滚动的,但如果你使用鼠标滚轮这是令人难以置信的慢,因为,我认为,这样的事实,有一个"反馈回路".

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

这是一个显示问题的小提琴.

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);
});

工作范例:

// 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);
});

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

#left {
  float: left;
}

#right {
  float: right;
}

<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>

的jsfiddle