JQuery的scrollTop的（）適用於窗口事件，但不是div的（在Chrome測試）

Question

此刻

https://www.cliquenext.com/sandbox.php

此頁面上的合作，我們有兩個格列。 #mainpage（右側）和#sidebar左側。

目標是，如果我在右欄滾動，左邊的滾動條也是。 如果我在左欄滾動，右欄也滾動。兩者同時。

當我使用$（窗口）.ScrollTop - 它工作正常。 當我使用$（「＃sidebar」）。Scrolltop - 它不會觸發。

以下代碼在滾動#sidebar時可以滾動#mainpage。

$("#sidebar").scroll(function(event){ 
    event.preventDefault(); 

    var st = $(this).scrollTop(); 
    if (st > lastScrollTop){ 
     // downscroll code 

     var y = $(window).scrollTop(); //your current y position on the page 
     $(window).scrollTop(y+10); 

    } else { 
     // upscroll code 

     var y = $(window).scrollTop(); //your current y position on the page 
     $(window).scrollTop(y-10); 


    } 
    lastScrollTop = st; 
}); 

以下代碼不起作用。在＃主頁上滾動時，＃邊欄也應該滾動。但不是。

$("#mainpage").scroll(function(event){ 
    event.preventDefault(); 

    var st2 = $(this).scrollTop(); 
    if (st2 > lastinfoscroll){ 
     // downscroll code 

     var y = $("#sidebar").scrollTop(); //your current y position on the page 
     $("#sidebar").scrollTop(y+10); 

    } else { 
     // upscroll code 

     var y = $("#sidebar").scrollTop(); //your current y position on the page 
     $("#sidebar").scrollTop(y-10); 


    } 
    lastinfoscroll = st2; 
}); 

我想檢測其中一個div是否正在滾動，然後滾動這兩個div。

我似乎無法弄清楚如何讓它在div上觸發，這樣我就可以一次滾動兩個div。多年來一直困在這個問題上。也不想使用Animate。

任何幫助將不勝感激。 乾杯

Answer 1

.scroll()在div上做火，而.scrollTop()也對它們起作用。您可以簡化代碼：去掉滾動位置的緩存，以及電流與所需位置的計算，問題消失:)

下面的代碼片段中同步所有$containers滾動位置：

$(function() { 
    var $containers = $(".container"); 

    $containers.scroll(_.throttle(syncScroll, 20, { leading: false })); 

    function syncScroll() { 
    var $this = $(this), 
     $other = $containers.not(this), 
     target = $this.scrollTop(); 

    if ($other.scrollTop() !== target) { 
     $other.scrollTop(target); 
    } 

    } 

}); 

你可以在this demo（code view）中看到它的行動。

節流很重要，否則使用鼠標滾輪滾動的慣性將會消失（並且您會用垃圾滾動事件淹沒CPU）。我在這裏使用Underscore（_.throttle()），但是其他任何實現都可以。您可以使用第二個參數來控制延遲的範圍，當前設置爲20ms。

此處的示例同步絕對滾動位置，因此它意味着滾動的內容在任何地方都處於相同高度。對於不同高度的內容，您需要經過快速轉換並以百分比形式表示目標位置，然後再將其轉換回絕對值以滾動$other框。