DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> jQuery scroll事件實現監控滾動條分頁簡單示例
jQuery scroll事件實現監控滾動條分頁簡單示例
編輯:JavaScript綜合知識     

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

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())) {            //當底部基本距離+滾動的高度〉=文檔的高度-窗體的高度時;             //我們需要去異步加載數據了             $.getJSON("url", { page: "2" }, function (str) { alert(str); });         }     }); });   注意:(window).height()和(document).height()的區別   jQuery(window).height()代表了當前可見區域的大小,而jQuery(document).height()則代表了整個文檔的高度,可視具體情況使用.   注意當浏覽器窗口大小改變時(如最大化或拉大窗口後) jQuery(window).height() 隨之改變,但是jQuery(document).height()是不變的。    代碼如下: $(document).scrollTop() 獲取垂直滾動的距離  即當前滾動的地方的窗口頂端到整個頁面頂端的距離 $(document).scrollLeft() 這是獲取水平滾動條的距離       要獲取頂端 只需要獲取到scrollTop()==0的時候  就是頂端了   要獲取底端 只要獲取scrollTop()>=$(document).height()-$(window).height()  就可以知道已經滾動到底端了   代碼如下: $(document).height()  //是獲取整個頁面的高度 $(window).height()  //是獲取當前 也就是你浏覽器所能看到的頁面的那部分的高度  這個大小在你縮放浏覽器窗口大小時 會改變 與document是不一樣的  根據英文應該也能理解吧   自己做個實驗就知道了  代碼如下: $(document).scroll(function(){     $("#lb").text($(document).scrollTop()); }) <span id="lb" style="top:100px;left:100px;position:fixed;"></span><!--一個固定的span標記 滾動時方便查看-->
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved