jQuery scroll事件實現(xiàn)監(jiān)控滾動條分頁示例

更新時間：2014年04月04日 08:55:44 作者：

這篇文章主要介紹了jQuery scroll事件實現(xiàn)監(jiān)控滾動條分頁簡單示例,使用ajax加載,同時介紹了(document).height()與$(window).height()的區(qū)別,需要的朋友可以參考下

scroll事件適用于window對象，但也可滾動iframe框架與CSS overflow屬性設置為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ù)英文應該也能理解吧

自己做個實驗就知道了

復制代碼代碼如下:

$(document).scroll(function(){
    $("#lb").text($(document).scrollTop());
})
<span id="lb" style="top:100px;left:100px;position:fixed;"></span><!--一個固定的span標記 滾動時方便查看-->

您可能感興趣的文章:

jQuery 實現(xiàn)批量提交表格多行數(shù)據(jù)的方法
今天小編就為大家分享一篇jQuery 實現(xiàn)批量提交表格多行數(shù)據(jù)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
原生和jQuery的ajax用法詳解
Ajax被認為是(Asynchronous(異步) JavaScript And Xml的縮寫）?，F(xiàn)在，允許瀏覽器與服務器通信而無須刷新當前頁面的技術都被叫做Ajax。這篇文章主要介紹了原生和jQuery的ajax用法，需要的朋友參考下吧
2017-01-01
jQuery的ajax中使用FormData實現(xiàn)頁面無刷新上傳功能
這篇主要寫如何利用ajax和FormData實現(xiàn)頁面無刷新的文件上傳效果，主要用到了jQuery的ajax()方法和XMLHttpRequest Level 2的FormData接口。需要的的朋友參考下本文
2017-01-01
一個基于jquery的文本框記數(shù)器
基于jquery的文本框記數(shù)器實現(xiàn)代碼，需要的朋友可以參考下
2012-09-09
jquery實現(xiàn)拖動效果
這篇文章主要為大家詳細介紹了jquery實現(xiàn)拖動效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-08-08
提升jQuery的性能需要做好七件事
這篇文章主要介紹了提升jQuery的性能需要做好的七件事，希望真的幫助大家提升jQuery性能,需要的朋友可以參考下
2016-01-01
jquery attr方法獲取input的checked屬性問題
如果使用jquery,應使用prop方法來獲取和設置checked屬性，不應使用attr,需要的朋友可以參考下
2014-05-05
jquery動態(tài)改變onclick屬性導致失效的問題解決方法
onclick屬性失效的問題，相信很多的朋友都有遇到過吧，jquery動態(tài)改變onclick屬性就會導致此問題的發(fā)生，解決方法如下，希望對大家有所幫助
2013-12-12
EasyUi tabs的高度與寬度根據(jù)IE窗口的變化自適應代碼
EasyUi tabs的高度與寬度根據(jù)IE窗口的變化自適應代碼,需要的朋友可以參考下。
2010-10-10
jquery實現(xiàn)文本框鼠標右擊無效以及不能輸入的代碼
jquery實現(xiàn)文本框鼠標右擊無效以及不能輸入的實現(xiàn)方法，需要的朋友可以參考下。
2010-11-11