同步滾動 - 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