jQuery scroll事件實現(xiàn)監(jiān)控滾動條分頁示例
scroll事件適用于window對象,但也可滾動iframe框架與CSS overflow屬性設(shè)置為scroll的元素。
$(document).ready(function () { //本人習慣這樣寫了
$(window).scroll(function () {
//$(window).scrollTop()這個方法是當前滾動條滾動的距離
//$(window).height()獲取當前窗體的高度
//$(document).height()獲取當前文檔的高度
var bot = 50; //bot是底部距離的高度
if ((bot + $(window).scrollTop()) >= ($(document).height() - $(window).height())) {
//當?shù)撞炕揪嚯x+滾動的高度〉=文檔的高度-窗體的高度時;
//我們需要去異步加載數(shù)據(jù)了
$.getJSON("url", { page: "2" }, function (str) { alert(str); });
}
});
});
注意:(window).height()和(document).height()的區(qū)別
jQuery(window).height()代表了當前可見區(qū)域的大小,而jQuery(document).height()則代表了整個文檔的高度,可視具體情況使用.
注意當瀏覽器窗口大小改變時(如最大化或拉大窗口后) jQuery(window).height() 隨之改變,但是jQuery(document).height()是不變的。
$(document).scrollTop() 獲取垂直滾動的距離 即當前滾動的地方的窗口頂端到整個頁面頂端的距離
$(document).scrollLeft() 這是獲取水平滾動條的距離
要獲取頂端 只需要獲取到scrollTop()==0的時候 就是頂端了
要獲取底端 只要獲取scrollTop()>=$(document).height()-$(window).height() 就可以知道已經(jīng)滾動到底端了
$(document).height() //是獲取整個頁面的高度
$(window).height() //是獲取當前 也就是你瀏覽器所能看到的頁面的那部分的高度 這個大小在你縮放瀏覽器窗口大小時 會改變 與document是不一樣的 根據(jù)英文應(yīng)該也能理解吧
自己做個實驗就知道了
$(document).scroll(function(){
$("#lb").text($(document).scrollTop());
})
<span id="lb" style="top:100px;left:100px;position:fixed;"></span><!--一個固定的span標記 滾動時方便查看-->
- 使用Jquery+Ajax+Json如何實現(xiàn)分頁顯示附JAVA+JQuery實現(xiàn)異步分頁
- jQuery+Ajax+PHP+Mysql實現(xiàn)分頁顯示數(shù)據(jù)實例講解
- 基于Jquery+Ajax+Json實現(xiàn)分頁顯示附效果圖
- Asp.net MVC 中利用jquery datatables 實現(xiàn)數(shù)據(jù)分頁顯示功能
- 用jQuery中的ajax分頁實現(xiàn)代碼
- JQuery+Ajax無刷新分頁的實例代碼
- 基于jQuery的實現(xiàn)簡單的分頁控件
- 基于JQuery的Pager分頁器實現(xiàn)代碼
- jQuery EasyUI API 中文文檔 - Pagination分頁
- jQuery DataTables插件自定義Ajax分頁實例解析
- jquery實現(xiàn)的分頁顯示功能示例
相關(guān)文章
jQuery 動態(tài)酷效果實現(xiàn)總結(jié)
jQuery是一個優(yōu)秀的JavaScript框架,可以很好的解決不同瀏覽器兼容的問題,尤其是在ASP.NET MVC下,它的作用更加的凸顯。2009-12-12Jquery ajaxsubmit上傳圖片實現(xiàn)代碼
這是數(shù)月前的事情了,場景是這樣的: 在進行圖片上傳的時,我發(fā)現(xiàn)開發(fā)人員使用的上傳圖片方式是Iframe + 傳統(tǒng)的 http post 來處理的。2010-11-11Jquery中國地圖熱點效果-鼠標經(jīng)過彈出提示層信息的簡單實例
本篇文章主要是對Jquery中國地圖熱點效果-鼠標經(jīng)過彈出提示層信息的簡單實例進行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-02-02ASP.NET jQuery 實例2 (表單中使用回車在TextBox之間向下移動)
每次當用戶在一個文本框輸入完數(shù)據(jù)后,更希望在敲入回車鍵后,焦點會自動移動到下一個文本框2012-01-01jQuery對象數(shù)據(jù)緩存Cache原理及jQuery.data方法區(qū)別介紹
jQuery.data(..)來實現(xiàn)數(shù)據(jù)緩存,但有兩個用戶經(jīng)常使用的data([key],[value])和jQuery.data(element,[key],[value]),接下來為大家介紹下他們的區(qū)別,感興趣的朋友可以參考下哈2013-04-04在Web項目中引入Jquery插件報錯的完美解決方案(圖解)
這篇文章主要介紹了在Web項目中引入Jquery插件報錯的完美解決方案的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-09-09