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