2つの要素間でスクロールバーを同期する -

Question

スクロールバーを2つの要素の間で同期させるには各イベントを再帰的に呼び出すのですか？

通常は、次のコードを期待する：

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

をしかし、あなたは$ DIV1の1ピクセルをスクロールする場合は、この場合には、それが火に$のDIV2のスクロールイベントを促すメッセージが表示されますされ、同様に$ DIV2の1ピクセルをスクロールします$ div1にスクロール位置を再適用します。 これは問題ではないかもしれませんが、このコードをページに適用してマウスで自然にスクロールすると、ハンドラが互いに呼び出してスクロールを実行できないため、1px単位でスクロールします。

この問題はどのように解決しますか？

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

Answer 1

は良い解決策を見つけました。デバウンスはトリックです。

タイマーとboolの組み合わせを使用して、要素がユーザーによってスクロールされていることを確認できます。したがって、（ユーザがスクロールダウンしたときのように）スクロールイベントが急速かつ連続的に起動されると、ハンドラが再帰的に互いに呼び出すことが防止される。次のコードトリックん：https://jsfiddle.net/axtn/a91fsar3

：

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をチェック