如何使用jQuery 檢測用戶何時滾動到Div 底部

您已經創建了一個包含動態內容的div 元素，其中包含“自動”溢出設定。為了增強使用者體驗，您希望在使用者捲動到此 div 框底部時載入其他內容。但是，您不確定如何偵測該特定事件。

此檢測的關鍵在於利用特定的jQuery 屬性和方法：

• $().scrollTop():表示元素已滾動的像素數
• $ ().innerHeight()：表示元素的內部高度element
• DOMElement.scrollHeight：傳回元素內容的高度

要確定使用者何時到達div的底部，可以比較前兩個屬性的總和到第三個屬性。當這些值匹配時，就到達了 div 的末尾。

jQuery(function($) {
    $('#flux').on('scroll', function() {
        if($(this).scrollTop()   $(this).innerHeight() >= $(this)[0].scrollHeight) {
            alert('end reached');
        }
    })
});

此解決方案利用 on() 方法，該方法是 jQuery 版本 1.7 中事件處理的首選方法。

附加說明：

• 事件監聽器附加到帶有#flux ID的div，它代表您感興趣監視的元素。
• Alert() 函數用於示範目的。您可以在此處新增您自己的載入附加內容的邏輯。
• 可以在 http://jsfiddle.net/doktormolle/w7X9N/ 找到一個實例。