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

我有两个div，就像一个列表或一个表，我试图使div a滚动div B，反之亦然。用鼠标滚轮

这个问题是因为我在两者上都绑定了“scroll”，当我为div A设置scrollTop=div B中的某个内容时，它也会触发div A的“scroll”

我想到的是：在

mouseover

-为当前元素绑定“scroll”，然后在

mouseout

取消绑定，在绑定函数中更改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());
    }
}

请参见：

但是，当滚动并从一个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++;
});

---

感谢高级版。

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

小提琴：

（在来自的帮助下）

表达式反之亦然。您可以不必说“忽略此项”，直接编辑此项并更新您的问题：）

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