同步滚动 - jQuery的

Question

你怎么能没有同步递归调用每个事件的两个元素之间的滚动条？

一般你会希望下面的代码：

$div1.scroll(function() { 
    $div2.scrollTop($div1.scrollTop()); 
}); 
$div2.scroll(function(){ 
    $div1.scrollTop($div2.scrollTop()); 
}); 

但在这种情况下，如果您滚动$ DIV1 1px的，它会滚动$ DIV2 1px的为好，这将促使$ DIV2滚动事件，火灾并重新将滚动位置应用于$ div1。 虽然这看起来不是什么问题，但是当将此代码应用于页面并自然地用鼠标滚动时，它会以1px的增量滚动，因为处理程序会调用eachother并且不允许滚动。

那么，你会如何解决这个问题？

实施例：https://jsfiddle.net/axtn/a91fsar3/2

Answer 1

找到了一个很好的解决方案。 Debouncing可以做到这一点。

您可以使用定时器和布尔的组合来确保元素正在被用户滚动。因此，当滚动事件被快速连续地触发时（例如当用户向下滚动时），它防止处理器递归地调用彼此。下面的代码做的伎俩：

var userScroll1 = true; 
var userScroll2 = true; 
var timer; 

$div1.scroll(function() { 
    if(userScroll2) { 
    userScroll1 = false; 
    clearTimeout(timer); 
    $div2.scrollTop($div1.scrollTop()); 
    timer = setTimeout(function() { 
     userScroll1 = true; 
    }, 100); 
    } 
}); 
$div2.scroll(function(){ 
    if(userScroll1) { 
    userScroll2 = false; 
    clearTimeout(timer); 
    $div1.scrollTop($div2.scrollTop()); 
    timer = setTimeout(function() { 
     userScroll2 = true; 
    }, 100); 
    } 
}); 

退房的正常jsbin：https://jsfiddle.net/axtn/a91fsar3