判斷滾動條到底部的JS代碼

oofw5751 9年前發布 | 4K 次閱讀 JavaScript

lazyload.js           

?
//滾動條在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   

$(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>
 本文由用戶 oofw5751 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！