js/jquery控制頁面動態(tài)加載數(shù)據(jù) 滑動滾動條自動加載事件的方法
更新時間：2017年02月08日 09:07:56 投稿：jingxian
下面小編就為大家?guī)硪黄猨s/jquery控制頁面動態(tài)加載數(shù)據(jù) 滑動滾動條自動加載事件的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
頁面滾動動態(tài)加載數(shù)據(jù),頁面下拉自動加載內(nèi)容
相信很多人都見過瀑布流圖片布局，那些圖片是動態(tài)加載出來的，效果很好，對服務(wù)器的壓力相對來說也小了很多
有手機(jī)的相信都見過這樣的效果：進(jìn)入qq空間，向下拉動空間，到底部時，會動態(tài)加載剩余的說說或者是日志
今天我們就來看看他們的實現(xiàn)思路和js控制動態(tài)加載的代碼
下面的代碼主要是控制滾動條下拉時的加載事件的
在下面代碼說明出，寫上你的操作即可，無論是加載圖片還是加載記錄數(shù)據(jù) 都可以
別忘了引用jquery類庫
$(window).scroll(function () {
var scrollTop = $(this).scrollTop();
var scrollHeight = $(document).height();
var windowHeight = $(this).height();
if (scrollTop + windowHeight == scrollHeight) {
//此處是滾動條到底部時候觸發(fā)的事件，在這里寫要加載的數(shù)據(jù)，或者是拉動滾動條的操作
//var page = Number($("#redgiftNextPage").attr('currentpage')) + 1;
//redgiftList(page);
//$("#redgiftNextPage").attr('currentpage', page + 1);
}
});
解析：
判斷滾動條到底部，需要用到DOM的三個屬性值，即scrollTop、clientHeight、scrollHeight。
scrollTop為滾動條在Y軸上的滾動距離。
clientHeight為內(nèi)容可視區(qū)域的高度。
scrollHeight為內(nèi)容可視區(qū)域的高度加上溢出（滾動）的距離。
從這個三個屬性的介紹就可以看出來，滾動條到底部的條件即為scrollTop + clientHeight == scrollHeight。（兼容不同的瀏覽器）。
以上這篇js/jquery控制頁面動態(tài)加載數(shù)據(jù) 滑動滾動條自動加載事件的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了原生js實現(xiàn)無縫輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01
這篇文章主要介紹了Openlayers3實現(xiàn)車輛軌跡回放功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
下面小編就為大家?guī)硪黄蛟焱ㄓ玫膭蛩龠\動框架(實例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
getElementByID、createElement、appendChild幾個DHTML元素
WEB標(biāo)準(zhǔn)下可以通過getElementById(), getElementsByName(), and getElementsByTagName()訪問2008-06-06
本篇文章主要是對js判斷url是否有效的兩種方法進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-03-03
前端接口報錯Required?request?body?is?missing解決辦法
這篇文章主要給大家介紹了關(guān)于前端接口報錯Required?request?body?is?missing的解決辦法,文中通過代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了JavaScript生成隨機(jī)驗證碼代碼實例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-09-09
這篇文章主要介紹了Javascript常用小技巧,實例匯總了javascript運算符、表達(dá)式及遍歷等常用技巧,需要的朋友可以參考下2015-06-06
js通過iframe加載外部網(wǎng)頁的實現(xiàn)代碼
這篇文章主要介紹了js通過iframe加載外部網(wǎng)頁的實現(xiàn)代碼,需要的朋友可以參考下2015-04-04
這篇文章主要給大家介紹了關(guān)于如何手動實現(xiàn)es5中的bind方法的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12