如何使用 jQuery 在特定 Div 滾動可見時精確觸發資料載入？-js教程-PHP中文網

如何使用 jQuery 在特定 Div 滾動可見時精確觸發資料載入？

Susan Sarandon

發布： 2024-11-05 22:27:02

原創

444 人瀏覽過

How to Trigger Data Loading Precisely When a Specific Div Becomes Visible on Scroll with jQuery?

使用jQuery 精確控制使用者捲動的資料載入

在Web 開發中，實現無限滾動對於透過無縫載入附加內容來增強使用者體驗至關重要。使用者瀏覽內容時的資料。然而，自訂此功能以定位頁面上的特定元素可能會帶來挑戰。

在這種情況下，目標是僅在特定

時載入更多資料。類別“.loading”在滾動時對使用者可見。為此，我們可以利用 jQuery 的滾動功能來監控視口並相應地觸發資料載入。

解決方案的核心在於檢查捲動位置是否已到達頁面底部。當觸底時，可以進行 AJAX 呼叫來檢索下一組資料。然後將此資料附加到指定的載入

中。

jQuery 程式碼如下所示：

$(window).scroll(function() {
    if($(window).scrollTop() == $(document).height() - $(window).height()) {
           // AJAX call to get data from server and append to the div
    }
});

登入後複製

這種方法有效地將資料載入與載入的可見性聯繫起來

透過利用滾動事件。當使用者向下捲動頁面時，腳本會不斷檢查捲動位置，並在

出現時啟動資料載入。進入視口。

以上是如何使用 jQuery 在特定 Div 滾動可見時精確觸發資料載入？的詳細內容。更多資訊請關注PHP中文網其他相關文章！