jQuery判斷網(wǎng)頁是否已經(jīng)滾動到瀏覽器底部的實現(xiàn)方法
有些需求中,需要當用戶滾動到瀏覽器底部的時候,再加載新的內(nèi)容。筆者在這里介紹如何使用Jquery判斷用戶是否已經(jīng)瀏覽到網(wǎng)頁的底部了。
在了解下面的知識點之前,筆者這里先介紹幾個概念。
$(window).height(); //用于獲取瀏覽器顯示區(qū)域的高度
$(window).width(); //用于獲取瀏覽器顯示區(qū)域的寬度
$(document.body).height(); //獲取頁面文檔的高度
$(document.body).width(); //獲取頁面文檔的寬度
$(document).scrollTop(); //獲取垂直滾動條到頂部的垂直距離
$(document).scrollLeft(); //獲取水平滾動條到左邊的水平距離
通過上面的知識點,可以知道:瀏覽器顯示區(qū)域的高度+垂直滾動條距離頂部距離<=網(wǎng)頁的高度。
有了這個結(jié)論,那么實現(xiàn)起來就容易了。下面的代碼實現(xiàn)了,判斷用戶是否瀏覽到了網(wǎng)頁的底部。
$(window).scroll(function(){ var h=$(document.body).height();//網(wǎng)頁文檔的高度 var c = $(document).scrollTop();//滾動條距離網(wǎng)頁頂部的高度 var wh = $(window).height(); //頁面可視化區(qū)域高度 if (Math.ceil(wh+c)>=h){ alert("我已經(jīng)到底部啦"); } })
如果需要判斷用戶是否已經(jīng)瀏覽到某個元素的話,那么只需要把上面的網(wǎng)頁文檔高度,換成某一個元素距離網(wǎng)頁頂部的距離就可以了。例如:
$(window).scroll(function(){ var h=$("#div").offset().top;//id為div的元素距離網(wǎng)頁頂部的距離 var c = $(document).scrollTop();//滾動條距離網(wǎng)頁頂部的高度 var wh = $(window).height(); //頁面可視化區(qū)域高度 if (Math.ceil(wh+c)>=h){ alert("我已經(jīng)到底部啦"); } })
在這里讀者需要注意,判斷條件中,wh+c取得是滿足大于等于該數(shù)字的最小整數(shù)。經(jīng)過筆者的測試,在IE7、8、9、11上都沒有問題。
接下來筆者把上面的代碼封裝為一個插件。
(function ($) { //backcall是回調(diào)函數(shù),count表示回調(diào)函數(shù)被執(zhí)行的次數(shù),count只有在元素通過滾動條滑出的時候才起作用 $.fn.inBottom = function (backcall){ //判斷當前元素是否在目前屏幕可視化區(qū)域之內(nèi) if(this.offset().top >= $(window).height()){ this.inScroll(backcall,count); }else{ this.inWindow(backcall); } }; //直接加載回調(diào)函數(shù) $.fn.inWindow = function (backcall){ backcall(); }; //滾動監(jiān)聽滑動條,元素滾動到屏幕底部的時候,加載回調(diào)函數(shù) $.fn.inScroll = function (backcall,count) { var $this=this; $(window).scroll(function(){ //獲得這個元素到文檔頂部的距離 var awayDocTop=$this.offset().top; //獲得滾動條的top var sTop=$(document).scrollTop(); //獲得可視化窗口的高度 var wh=$(window).height(); if(Math.ceil(wh+sTop)>=awayDocTop){ if(count>0){ backcall(); count--; } }; }); }; })(jQuery);
然后讀者在引入上面的插件文件后,就可以通過類似于下面的代碼調(diào)用了。
$("#div").inBottom(function(){ alert("我被回調(diào)了"); },1);
總結(jié)
以上所述是小編給大家介紹的jQuery判斷網(wǎng)頁是否已經(jīng)滾動到瀏覽器底部的實現(xiàn)方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關文章
jQuery Ajax實現(xiàn)Select多級關聯(lián)動態(tài)綁定數(shù)據(jù)的實例代碼
這篇文章主要介紹了jQuery Ajax實現(xiàn)Select多級關聯(lián)動態(tài)綁定數(shù)據(jù)的實例代碼,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2018-10-10jQuery實現(xiàn)倒計時重新發(fā)送短信驗證碼功能示例
這篇文章主要介紹了jQuery實現(xiàn)倒計時重新發(fā)送短信驗證碼功能,結(jié)合實例形式分析了基于jQuery的倒計時操作功能實現(xiàn)方法,涉及jQuery表單提交、驗證、正則操作等技巧,需要的朋友可以參考下2017-01-01jQuery實現(xiàn)氣球彈出框式的側(cè)邊導航菜單效果
這篇文章主要介紹了jQuery實現(xiàn)氣球彈出框式的側(cè)邊導航菜單效果,通過css樣式控制結(jié)合jQuery響應鼠標事件動態(tài)切換元素樣式實現(xiàn)提示框效果,非常美觀實用,需要的朋友可以參考下2015-09-09談談Jquery中的children find 的區(qū)別有哪些
這篇文章給大家介紹jquery中的children find 的區(qū)別,涉及到的知識點有jquery find children,感興趣的朋友一起學習jquery find children方面的知識吧2015-10-10