如何在 jQuery 中偵測使用者何時滾動到 Div 底部？

如何使用jQuery 偵測使用者何時捲動到Div 底部

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

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

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

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

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

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

附加說明：

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

以上是如何在 jQuery 中偵測使用者何時滾動到 Div 底部？的詳細內容。更多資訊請關注PHP中文網其他相關文章！