js實現 web頁面的滾動條下拉時載入更多

北堂棣發表於2018-08-29
JSWeb

js實現 web頁面的滾動條下拉時載入更多

在手機上，資料列表的分頁都是下拉到底部的時候會載入更多，但是，去年三月份的時候遇到了客戶要求web頁面也要下拉載入更多的需求，於是按照web頁面在滾動條下拉時載入更多內容（個人專案經驗）文中的程式碼實現了這個下拉載入，很簡單的，程式碼如下：

var totalPages;//總頁數
var pageno = 0;//當前頁數
$(function(){
    $(window).scroll(function() {
       var scrollTop = $(this).scrollTop(),scrollHeight = $(document).height(),windowHeight = $(this).height();
       var positionValue = (scrollTop + windowHeight) - scrollHeight;
       if (positionValue == 0) {
           //do something
           if (pageno < totalPages - 1) {
               pageno++;
               doSomething(pageno);
           } else {
               alert(`沒有更多了`);
           }
       }
   });
);
 
function doSomething(pageno) {
        var url = "*******";//分頁列表的介面
        var data = {
                size: 5,
                start: pageno,
        };
        $.getJSON(url, data, function (rtn) {
                
        });
}

但是，今天測試人員發現，當瀏覽器縮放了或者螢幕顯示設定縮放時，就不能下拉載入了。時隔一年多，真是驚人@_@

經過除錯，發現是有縮放時positionValue的值就無法等於0了，沒法繼續載入更多了，這時看到一篇文章下拉載入更多DEMO(js實現)中講到：

如果等滾動條拉到底部時再載入，會影響使用者體驗。因為一般動態載入的時候都需要向服務端請求資源，這時需要時間。一個更佳的方式是，當滾動條距離底部一定距離（C）時，就動態載入更多，向服務端請求資源。也就是預載入，預讀取。公式如下
this.scrollHeight – C == $(this).scrollTop() + $(this).height()

看完後收到啟發，於是將positionValue的值設為大於等於-10，這裡的10也就是滾動條距離底部一定距離（C）的值。
果然，沒問題了，有縮放時也可以正常實現下拉載入。

於是，記錄下來，分享給大家，共勉。

另外提醒一點，$(window).scroll(function()監聽滾動事件不執行這個問題中的採納答案提到：

html,body的高度樣式如果設定為100%，$(window).scroll方法將檢測不到正確的滾出高度（0），導致滾動監聽事件失效，設定html,body{ height:auto }可以解決。

程式碼

var totalPages;//總頁數
var pageno = 0;//當前頁數
var C = 10;//滾動條距離底部的距離
$(function(){
    $(window).scroll(function() {
       var scrollTop = $(this).scrollTop(),scrollHeight = $(document).height(),windowHeight = $(this).height();
       var positionValue = (scrollTop + windowHeight) - scrollHeight;
       if (positionValue >= -C) {
           //do something
           if (pageno < totalPages - 1) {
               pageno++;
               doSomething(pageno);
           } else {
               alert(`沒有更多了`);
           }
       }
   });
);
 
function doSomething(pageno) {
        var url = "*******";//分頁列表的介面
        var data = {
                size: 5,
                start: pageno,
        };
        $.getJSON(url, data, function (rtn) {
                
        });
}

相關參考

web頁面在滾動條下拉時載入更多內容（個人專案經驗）
下拉載入更多DEMO(js實現)
$(window).scroll(function()監聽滾動事件不執行

相關文章