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

判斷滾動條到底部，需要用到dom的三個屬性值，使用jquery分別是：

$('body').scrolltop()為滾動條在y軸上的滾動距離。

$(window).height()為內容可視區域的高度。

$('body').height()為內容可視區域的高度加上溢位（滾動）的距離。

從這個三個屬性的介紹就可以看出來，滾動條到底部的條件即為$('body').scrolltop() +$(window).height() ==$('body').height()。

1.繫結滾動監聽事件

$(window).bind('scroll',isscrollbottom);

2.判斷滾動條已滾動到底部

$('body').height() - $('body').scrolltop() - $(window).height() < 10

3.進入判斷首先解除（防止進行多次ajax請求）

$(window).unbind('scroll',isscrollbottom);

4.返回資料，渲染到頁面並再次繫結監聽事件

$(window).bind('scroll',isscrollbottom);

var isscrollbottom = function()else

}//重新啟動滾動監聽事件，放入ajax成功函式的最後執行
//如果再次繫結未在ajax中執行，則可以在ajax過後進行延遲繫結
//settimeout(function(),2000);}}
$(window).bind('scroll',isscrollbottom);

scrolltop為滾動條在y軸上的滾動距離。

clientheight為內容可視區域的高度。

scrollheight為內容可視區域的高度加上溢位（滾動）的距離。

從這個三個屬性的介紹就可以看出來，滾動條到底部的條件即為scrolltop + clientheight == scrollheight。

1.滾動條在y軸上的滾動距離

function getscrolltop()

if(document.documentelement)
scrolltop = (bodyscrolltop - documentscrolltop > 0) ? bodyscrolltop : documentscrolltop;
return scrolltop;
}

function getscrollheight()

if(document.documentelement)
scrollheight = (bodyscrollheight - documentscrollheight > 0) ? bodyscrollheight : documentscrollheight;
return scrollheight;
}

function getwindowheight()else

return windowheight;
}

window.addeventlistener('scroll',isscrollb0ttom ,false);

var isscrollb0ttom = function()
};

1.每次滿足滑動到底部進入判斷先解除監聽事件；

2.每次載入資料渲染完後，必須再次繫結監聽事件；

3.判斷觸發條件使用乙個小的範圍。

其他[我的部落格，歡迎交流！](

[我的csdn部落格，歡迎交流！](

[前端筆記專欄](

[前端筆記列表](

[遊戲列表](

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

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

移動端滾動載入資料實現

模擬場景 移動端上劃到底，載入更多資料。1 本例子基於jquery實現。監聽滾動事件。2 獲取滾動條到文件頂部的距離，上圖scrolltop那段。原生js可用document.documentelement.scrolltop獲取。var scrolltop math.ceil this scrol...

JQUERY滾動載入

document height 整個網頁的高度 window height 瀏覽器可視視窗的高度 window scrolltop 瀏覽器可視視窗頂端距離網頁頂端的高度 垂直偏移 用一句話理解就是 當網頁滾動條拉到最低端時，document height window height window s...