js/jquery控制頁面動(dòng)態(tài)加載數(shù)據(jù) 滑動(dòng)滾動(dòng)條自動(dòng)加載事件的方法
頁面滾動(dòng)動(dòng)態(tài)加載數(shù)據(jù),頁面下拉自動(dòng)加載內(nèi)容
相信很多人都見過瀑布流圖片布局，那些圖片是動(dòng)態(tài)加載出來的，效果很好，對(duì)服務(wù)器的壓力相對(duì)來說也小了很多
有手機(jī)的相信都見過這樣的效果：進(jìn)入qq空間，向下拉動(dòng)空間，到底部時(shí)，會(huì)動(dòng)態(tài)加載剩余的說說或者是日志
今天我們就來看看他們的實(shí)現(xiàn)思路和js控制動(dòng)態(tài)加載的代碼
下面的代碼主要是控制滾動(dòng)條下拉時(shí)的加載事件的
在下面代碼說明出，寫上你的操作即可，無論是加載圖片還是加載記錄數(shù)據(jù) 都可以
別忘了引用jquery類庫
$(window).scroll(function () {
var scrollTop = $(this).scrollTop();
var scrollHeight = $(document).height();
var windowHeight = $(this).height();
if (scrollTop + windowHeight == scrollHeight) {
//此處是滾動(dòng)條到底部時(shí)候觸發(fā)的事件，在這里寫要加載的數(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è)屬性的介紹就可以看出來，滾動(dòng)條到底部的條件即為scrollTop + clientHeight == scrollHeight。（兼容不同的瀏覽器）。
以上這篇js/jquery控制頁面動(dòng)態(tài)加載數(shù)據(jù) 滑動(dòng)滾動(dòng)條自動(dòng)加載事件的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
瀏覽器解析js生成的html出現(xiàn)樣式問題的解決方法
接觸css, javascript有三年多了，今天遇到的問題最令我不可思議，很容易給人一種錯(cuò)覺，那就是js拼成的html結(jié)構(gòu)肯定有問題2012-04-04
很多DOM對(duì)象都有原生的事件支持，向div就有click、mouseover等事件，事件機(jī)制可以為類的設(shè)計(jì)帶來很大的靈活性，相信.net程序員深有體會(huì)。隨著web技術(shù)發(fā)展，使用JavaScript自定義對(duì)象愈發(fā)頻繁，讓自己創(chuàng)建的對(duì)象也有事件機(jī)制，通過事件對(duì)外通信，能夠極大提高開發(fā)效率2013-08-08
一直在使用js相關(guān)的東西，但很少作總結(jié)，今天遇到操作js數(shù)組的一些問題，對(duì)js的數(shù)組有了更進(jìn)一步的認(rèn)識(shí)2015-04-04
微信小程序?qū)崿F(xiàn)驗(yàn)證碼獲取倒計(jì)時(shí)效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)驗(yàn)證碼獲取倒計(jì)時(shí)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-02-02
javascript函數(shù)劫持，也就是老外提到的javascript hijacking技術(shù)。雖然這個(gè)概念在前端領(lǐng)域使用較少，但是在安全領(lǐng)域、自定義業(yè)務(wù)等場景下還是有一定的使用價(jià)值的。所以，這一篇文章將會(huì)和大家一起去了解一下JS中的函數(shù)劫持是什么，有什么作用，下面來一起看看吧。2016-09-09
在日常前端開發(fā)過程中，常用到頁面列表加載。這篇文章主要為大家介紹三種常用方法，分別是分頁加載、按鈕加載以及滾動(dòng)加載，需要的可以參考一下2022-09-09
這篇文章主要介紹了Webpack中雪碧圖插件使用詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
本文主要對(duì)javascript中的（Event）事件進(jìn)行介紹，文章篇尾舉了幾個(gè)案例：方塊隨著鼠標(biāo)移動(dòng)；輸入框文字提示；仿select控件；留言本；自定義右鍵菜單；鍵盤控制div運(yùn)動(dòng)。需要的朋友可以看下2016-12-12
js 點(diǎn)擊頁面其他地方關(guān)閉彈出層(示例代碼)
本篇文章主要介紹了js點(diǎn)擊頁面其他地方關(guān)閉彈出層的示例代碼。需要的朋友可以過來參考下，希望對(duì)大家有所幫助2013-12-12
three.js如何實(shí)現(xiàn)3D動(dòng)態(tài)文字效果
這篇文章主要給大家介紹了關(guān)于three.js如何實(shí)現(xiàn)3D動(dòng)態(tài)文字效果的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03