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