移動端滾動載入資料實現

2022-09-20 00:33:11 字數 609 閱讀 6786

模擬場景:移動端上劃到底,載入更多資料。

1、本例子基於jquery實現。監聽滾動事件。

2、獲取滾動條到文件頂部的距離,上圖scrolltop那段。原生js可用document.documentelement.scrolltop獲取。

var scrolltop = math.ceil($(this).scrolltop());

3、獲取可視區高度。原生js可用document.documentelement.clientheight獲取。

var _height = $(this).height()

4、獲取文件總高度。原生js用document.body.scrollheight獲取

var _h = \((document).height();

5、如果scrolltop+_height的距離大於等於_h,說明觸底了,再次請求資料追加到當前資料後面即可。

完整**如下:getimage()為請求資料的方法。

\)(function()

})

移動端滾動載入 jQuery 和 原生JS

判斷滾動條到底部,需要用到dom的三個屬性值,使用jquery分別是 body scrolltop 為滾動條在y軸上的滾動距離。window height 為內容可視區域的高度。body height 為內容可視區域的高度加上溢位 滾動 的距離。從這個三個屬性的介紹就可以看出來,滾動條到底部的條件即...

移動端滾動載入 jQuery 和 原生JS

判斷滾動條到底部,需要用到dom的三個屬性值,使用jquery分別是 body scrolltop 為滾動條在y軸上的滾動距離。window height 為內容可視區域的高度。body height 為內容可視區域的高度加上溢位 滾動 的距離。從這個三個屬性的介紹就可以看出來,滾動條到底部的條件即...

M端滾動非同步載入資料

var currentpage 1 預設頁 var pages 總頁數 function nextpage currentpage if currentpage pages if currentpage 1 var response ajax success function data async ...