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

2021-09-13 11:05:00 字數 1208 閱讀 1964

var totalpages;//總頁數

var pageno = 0;//當前頁數

$(function() else

}}););

function dosomething(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可以解決。
var totalpages;//總頁數

var pageno = 0;//當前頁數

var c = 10;//滾動條距離底部的距離

$(function() else

}}););

function dosomething(pageno) ;

$.getjson(url, data, function (rtn) );

}

下拉載入更多demo(js實現)

$(window).scroll(function()監聽滾動事件不執行

控制頁面的滾動條

1.控制頁面滾動條,跳到頁面底部 click me jump to bottom outout outout outout outout outout outout outout outout 2.在iframe內部控制父頁面滾動條滾到底部。2.1 parent.html outout outout...

HTML頁面的滾動條樣式

今天做東西時遇到要調整iframe的滾動條樣式,在網上找到了一些介紹,關鍵部分摘錄如下 scrollbar face color rgb 10,236,209 滾動條凸出部分的顏色 scrollbar highlight color rgb 23,255,155 滾動條空白部分的顏色 scrollb...

頁面滾動條

頁面載入條 前面也介紹過幾種進入頁面時的載入條,這裡介紹的這個是乙個無需任何製作出來的載入條。效果很精美 更適合於深色頁面內的放入 為了讓大家能聯連貫地看學好下面的步驟,所以此例項載入後的頁面還是原頁面。製作方法 將下面的 複製到裡 將下面的 複製到裡 將下面的 複製到 裡 例項注釋 定義載入條屬性...