萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> jQuery實現判斷滾動條到底部

jQuery實現判斷滾動條到底部

  這篇文章主要介紹了jQuery實現判斷滾動條到底部的相關資料,需要的朋友可以參考下

  判斷滾動條到底部,需要用到DOM的三個屬性值,即scrollTop、clientHeight、scrollHeight。

  scrollTop為滾動條在Y軸上的滾動距離。

  clientHeight為內容可視區域的高度。

  scrollHeight為內容可視區域的高度加上溢出(滾動)的距離。

  從這個三個屬性的介紹就可以看出來,滾動條到底部的條件即為scrollTop + clientHeight == scrollHeight。

  廢話不多少說,趕緊上代碼(兼容不同的浏覽器)。

lazyload.js

? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40  //滾動條在Y軸上的滾動距離 function getScrollTop(){   var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;   if(document.body){     bodyScrollTop = document.body.scrollTop;   }   if(document.documentElement){     documentScrollTop = document.documentElement.scrollTop;   }   scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;   return scrollTop; } //文檔的總高度 function getScrollHeight(){   var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;   if(document.body){     bodyScrollHeight = document.body.scrollHeight;   }   if(document.documentElement){     documentScrollHeight = document.documentElement.scrollHeight;   }   scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;   return scrollHeight; } //浏覽器視口的高度 function getWindowHeight(){   var windowHeight = 0;   if(document.compatMode == "CSS1Compat"){     windowHeight = document.documentElement.clientHeight;   }else{     windowHeight = document.body.clientHeight;   }   return windowHeight; } window.onscroll = function(){   if(getScrollTop() + getWindowHeight() == getScrollHeight()){     alert("you are in the bottom!");   } };

lazyload-jQuery.js

? 1 2 3 4 5 6 7 8 $(window).scroll(function(){   var scrollTop = $(this).scrollTop();   var scrollHeight = $(document).height();   var windowHeight = $(this).height();   if(scrollTop + windowHeight == scrollHeight){     alert("you are in the bottom");   } });

lazyLoad.html

? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 <!doctype html> <html lang="en" style="height:900px;"> <head> <meta charset="UTF-8"> <meta name="Author" content="forever"> <link rel="stylesheet" href="css/lazyload.css" /> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <title>lazyLoad</title> <script type="text/javascript">   $(function(){ var $ul=$("#lazyLoadWrap").find("ul"); $(window).scroll(function(){    var scrollTop = $(this).scrollTop();    var scrollHeight = $(document).height();    var windowHeight = $(this).height();    if(scrollTop + windowHeight == scrollHeight){ for(var i=0;i<6;i++){ $ul.append("<li>Hello</li>"); }    } }); }); </script> </head> <body> <div id="lazyLoadWrap"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li>12</li> </ul> </div> </body> </html>

       以上所述就是本文的全部內容了,希望大家能夠喜歡。

copyright © 萬盛學電腦網 all rights reserved