判斷滾動(dòng)條到底部，需要用到DOM的三個(gè)屬性值，即scrollTop、clientHeight、scrollHeight。
scrollTop為滾動(dòng)條在Y軸上的滾動(dòng)距離。
clientHeight為內(nèi)容可視區(qū)域的高度。
scrollHeight為內(nèi)容可視區(qū)域的高度加上溢出（滾動(dòng)）的距離。
從這個(gè)三個(gè)屬性的介紹就可以看出來，滾動(dòng)條到底部的條件即為scrollTop + clientHeight == scrollHeight。
廢話不多少說，趕緊上代碼（兼容不同的瀏覽器）。
lazyload.js
//滾動(dòng)條在Y軸上的滾動(dòng)距離 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
$(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
<!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>以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
