有效地收聽JS .scroll（）

Question

我有一個可滾動的元素，其中包含許多子元素和一個帶有相應選項的選擇標籤。

我想改變基於元素.scrollTop()

如何有效地做到這一點選擇的價值？我想過將兒童的.offset().top存儲在一個數組中，並循環遍歷它。但是，瀏覽器不處理它。我可能會嘗試創建一個.setTimeout()標誌，但這看起來並不乾淨。

r = $('ul') 
    offsets = [] 
    r.find('li').each((index) -> 
     offsets[index] = $(this).offset().top 
    ) 
    r.bind('scroll', -> 
     // while loop checking .scrollTop() > offsets[n] is slow 
     // maybe spams to many .scroll events? 
    ) 

Answer 1

@osoner說的+而不是在滾動偶處理程序中進行所有計算，在間隔後觸發處理程序中的另一個事件（例如，'fooscroll'），然後您將所有子元素訂閱到事件，並根據您設置的條件自行更新。

var scrollTimer; 
$(window).on('scroll', function(e) { 
    if (scrollTimer) { clearTimeout(scrollTimer); } 
    scrollTimer = setTimeout(function() { 
     $(window).trigger('fooscroll'); 
    }, 200); 
}); 

$('li').on('fooscroll', function() { 
    // Check scrollTop or whatever... 
}); 

Answer 2

您應該閱讀this suggestion from John Resig。基本上，每次用戶滾動時都會設置一個標誌，並使用檢查此標誌的間隔函數執行所需的操作。