收藏本站 收藏本站
積木網首頁 - 軟件測試 - 常用手冊 - 站長工具 - 技術社區
首頁 > JavaScript > jQuery > 正文

首頁 - PHP - 數據庫 - 操作系統 - 游戲開發 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell編程 - DOS命令 - jQuery - CSS樣式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

jQuery判斷網頁是否已經滾動到瀏覽器底部的實現方法

有些需求中,需要當用戶滾動到瀏覽器底部的時候,再加載新的內容。筆者在這里介紹如何使用Jquery判斷用戶是否已經瀏覽到網頁的底部了。

在了解下面的知識點之前,筆者這里先介紹幾個概念。

$(window).height(); //用于獲取瀏覽器顯示區域的高度

$(window).width(); //用于獲取瀏覽器顯示區域的寬度

$(document.body).height(); //獲取頁面文檔的高度

$(document.body).width(); //獲取頁面文檔的寬度

$(document).scrollTop(); //獲取垂直滾動條到頂部的垂直距離

$(document).scrollLeft(); //獲取水平滾動條到左邊的水平距離

通過上面的知識點,可以知道:瀏覽器顯示區域的高度+垂直滾動條距離頂部距離<=網頁的高度。

有了這個結論,那么實現起來就容易了。下面的代碼實現了,判斷用戶是否瀏覽到了網頁的底部。

 $(window).scroll(function(){
 var h=$(document.body).height();//網頁文檔的高度
 var c = $(document).scrollTop();//滾動條距離網頁頂部的高度
 var wh = $(window).height(); //頁面可視化區域高度

 if (Math.ceil(wh+c)>=h){
  alert("我已經到底部啦");
 }
 })

如果需要判斷用戶是否已經瀏覽到某個元素的話,那么只需要把上面的網頁文檔高度,換成某一個元素距離網頁頂部的距離就可以了。例如:

 $(window).scroll(function(){
 var h=$("#div").offset().top;//id為div的元素距離網頁頂部的距離
 var c = $(document).scrollTop();//滾動條距離網頁頂部的高度
 var wh = $(window).height(); //頁面可視化區域高度

 if (Math.ceil(wh+c)>=h){
  alert("我已經到底部啦");
 }
 })

在這里讀者需要注意,判斷條件中,wh+c取得是滿足大于等于該數字的最小整數。經過筆者的測試,在IE7、8、9、11上都沒有問題。

接下來筆者把上面的代碼封裝為一個插件。

(function ($) {
  //backcall是回調函數,count表示回調函數被執行的次數,count只有在元素通過滾動條滑出的時候才起作用
 $.fn.inBottom = function (backcall){
 //判斷當前元素是否在目前屏幕可視化區域之內
 if(this.offset().top >= $(window).height()){
 this.inScroll(backcall,count);
 }else{
 this.inWindow(backcall);
 }
 };
 //直接加載回調函數
 $.fn.inWindow = function (backcall){
 backcall();
 };
 //滾動監聽滑動條,元素滾動到屏幕底部的時候,加載回調函數
 $.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);

然后讀者在引入上面的插件文件后,就可以通過類似于下面的代碼調用了。

$("#div").inBottom(function(){
 alert("我被回調了");
},1);

總結

以上所述是小編給大家介紹的jQuery判斷網頁是否已經滾動到瀏覽器底部的實現方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對積木網網站的支持!

關于jQuery里prev()的簡單操作代碼
prev()函數被用來匹配元素集的前一個兄弟元素,僅僅只有前一個兄弟元素被選擇,其子元素將被忽略。這里給大家介紹jQuery里prev()的簡單操作,具體內

360提示[高危]使用存在漏洞的JQuery版本的解決方法
今天發現360給我發送了一封郵件,發現網站:使用存在漏洞的JQuery版本,黑客可以利用這個漏洞入侵您的網站。然后到360檢測查看了解決辦法但是感覺并

jquery ajax異步提交表單數據的方法
使用jquery的ajax方法可以異步提交表單,成功后后臺返回json數據,回調函數處理,可以不用刷新頁面,達到異步的目的;處理表單的數據可以用serialize()

本周排行

更新排行

強悍的草根IT技術社區,這里應該有您想要的! 友情鏈接:b2b電子商務
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP備05050695號
36选7走势图大全 腾讯分分彩是正规的吗? 江西11选5开奖结果直播 陕西11选5技巧投注 正规股票配资平台 棋牌下载送10现金 河北11选5遗漏任三 内蒙古快3推荐号码推荐 云南快乐10分最大遗漏 全国最知名的股票配资平台 幸运飞艇怎么抓3码 股票分析群 快乐双彩网走势图表图 吉利 股票 3u娱乐城真钱百家乐 2012年6月4日上证指数 体彩排列三今晚预测