如何使用 jQuery 實現多個內容部分的無限滾動？

使用 jQuery 實作無限捲動

在 Web 開發中，通常希望允許使用者在向下捲動頁面時載入更多資料。然而，當有多個可能滾動的內容部分時，比較頁面高度和滾動高度的典型方法就不夠了。

為了解決這個挑戰，需要一個解決方案來確定何時特定的「正在載入」元素在視口中變得可見。此元素應觸發為其對應內容部分載入附加資料。

jQuery 解決方案

使用 jQuery，可以監視滾動位置並觸發操作當特定元素進入可見區域時。實作方式如下：

1. 滾動事件處理程序：

   $(window).scroll(function() {
       // Execute code as the user scrolls
   });

   登入後複製

2. 檢查元素可見性:

   在捲動事件處理程序中，我們需要檢查「.loading」元素是否可見。這可以使用getBoundingClientRect() 方法來完成：

   var loadingElement = document.querySelector(".loading");
   var loadingElementRect = loadingElement.getBoundingClientRect();

   登入後複製

3. 條件Ajax 請求：

   如果「.loading」元素是可見，我們可以發起Ajax請求來檢索更多的資料。此請求可以在處理過程中顯示載入旋轉器或其他視覺指示器：

   if (loadingElementRect.bottom >= 0) {
       // Trigger Ajax request to load more data
   }

   登入後複製

透過執行以下步驟，您可以實現無限滾動功能，在載入時動態載入更多數據。使用者捲動到特定內容部分的底部。特定的“.loading”元素作為觸發資料載入過程的指示器。

以上是如何使用 jQuery 實現多個內容部分的無限滾動？的詳細內容。更多資訊請關注PHP中文網其他相關文章！