javascript - 用鼠标滚轮控制div A的滚动同时滚动div B，反之亦然

Question

我有 2 个 div，其作用类似于列表或表格，我正在尝试使 div A 的滚动 div B 滚动，反之亦然。使用鼠标滚轮。

问题是因为我在两者上都绑定(bind)了“滚动”，当我为div A设置scrollTop =来自div B的东西时，它也会触发div A的“滚动”。

我想出的是:在mouseover上 - 为当前元素绑定(bind)“scroll”，然后在mouseout上取消绑定(bind)它，并在绑定(bind)函数中更改scrollTop示例:

 $('#parent1, #parent2').off('mouseover').on( 'mouseover', function () {
     var that = this;
     refresh(that);
     $(this).off( 'scroll').on( 'scroll', function () {
         refresh(that);   
     });
 } ).off('mouseout').on( 'mouseout', function () {
     $(this).off( 'scroll');
     refresh(this);
 });

function refresh(that){
    if(that == $('#parent1')[0]){
        $('#parent2').scrollTop($(that).scrollTop()); 
    }else{
        $('#parent1').scrollTop($(that).scrollTop());
    }
}

查看实际效果:Fiddle

但是，当滚动并从 1 个 div 足够快地移动到另一个 div 时，它会导致麻烦并且无法正常工作。

有人有想法吗？

啊忽略 fiddle 中的以下代码:

var i= 0;
$('#parent1 div').each(function(index, div){
    $(div).append(" " + i);
    i++;
});

var i= 0;
$('#parent2 div').each(function(index, div){
    $(div).append(" " + i);
    i++;
});

提前致谢。

Answer 1

您可以添加一个事件监听器，当您滚动 A 时，它会更新 B 的滚动位置。但是为此，您需要一个标志，以便当您设置滚动 B 位置时，它不会触发滚动 B 事件。

fiddle :http://jsfiddle.net/7qBvM/

var ignoreEvent = false;

$('#parent1').scroll( function() {
    var ignore = ignoreEvent;
    ignoreEvent = false
    if (!ignore) {
        ignoreEvent = true;
        $('#parent2').scrollTop($(this).scrollTop());
    }} );

$('#parent2').scroll( function() {
    var ignore = ignoreEvent;
    ignoreEvent = false;
    if (!ignore) {
        ignoreEvent = true;
        $('#parent1').scrollTop($(this).scrollTop());  
    }} );

(在 this question 的帮助下)