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

Question

我有2个div，表现得像列表或表格，我试图使div A的滚动滚动div B，反之亦然。 用鼠标滚轮。

这个问题是因为我在两者上绑定“滚动”，当我从div B为div设置scrollTop = something时它也会触发div A的“滚动”。

我想出的是：在mouseover - 为当前元素绑定“scroll”，然后在mouseout取消绑定它，在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());
    }
}

看看它在行动中： 小提琴

然而，当滚动并从1 div快速移动到另一个div时，它会引起麻烦并且无法正常工作。

谁有想法？

啊忽略小提琴中的以下代码：

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

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

小提琴： 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());  
    }} );

（在这个问题的帮助下）