js如何實現上拉載入更多

2021-09-19 18:24:00 字數 738 閱讀 2117

我們在專案中經常使用到下拉載入更多,之前要麼是底部寫載入按鈕,要麼是引入外掛程式。今天終於有時間手寫乙個了,之前感覺挺麻煩,明白原理後,其實很簡單...

scrolltop:滾動視窗的高度距離window頂部的距離,它會隨著往上滾動而不斷增加,初始值是0,它是乙個變化的值;

clientheight:它是乙個定值,表示螢幕可是區域的高度;

scrollheight:頁面不能滾動時是不存在的,body長度超過window時才會出現,所表示body所有元素的長度,

由上面的三個值所產生乙個原理公式:

scrolltop + clientheight >= scrollheight

let clientheight  = document.documentelement.clientheight; //瀏覽器高度

let scrollheight = document.body.scrollheight;

let scrolltop = document.documentelement.scrolltop;

let distance = 50; //距離視窗還用50的時候,開始觸發;

if ((scrolltop + clientheight) >= (scrollheight - distance))

js如何實現上拉載入更多

我們在專案中經常使用到下拉載入更多,之前要麼是底部寫載入按鈕,要麼是引入外掛程式。今天終於有時間手寫乙個了,之前感覺挺麻煩,明白原理後,其實很簡單.scrolltop 滾動視窗的高度距離window頂部的距離,它會隨著往上滾動而不斷增加,初始值是0,它是乙個變化的值 clientheight 它是乙...

js上拉載入更多

方法一 jq var page 1,分頁碼 off on false,分頁開關 滾動載入方法 1 中用的 timers null 定時器 滾動載入方法 2 中用的 載入資料 var loadingdatafn function off on true 重要 這是使用了 時 用到的 如果用 滾動載入方...

js上拉載入更多

jq方法 方法一 var page 1,分頁碼 off on false,分頁開關 滾動載入方法 1 中用的 timers null 定時器 滾動載入方法 2 中用的 載入資料 var loadingdatafn function off on true 重要 這是使用了 時 用到的 如果用 滾動載...