信鸽网

jQuery实现判断滚动条到底部

  作者：bea

判断滚动条到底部，需要用到DOM的三个属性值，即scrollTop、clientHeight、scrollHeight。 scrollTop为滚动条在Y轴上的滚动距离。 clientHeight为内容可视区域的高度。 scrollHeight为内容可视区域的高度加上溢出（滚动）的距离。 从这个三个属性的介绍就可以看出来，滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight。 废话不多少说，赶紧上代码（兼容不同的浏览器）。 la

判断滚动条到底部，需要用到DOM的三个属性值，即scrollTop、clientHeight、scrollHeight。


scrollTop为滚动条在Y轴上的滚动距离。


clientHeight为内容可视区域的高度。


scrollHeight为内容可视区域的高度加上溢出（滚动）的距离。


从这个三个属性的介绍就可以看出来，滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight。


废话不多少说，赶紧上代码（兼容不同的浏览器）。


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>


以上所述就是本文的全部内容了，希望大家能够喜欢。




有用  |  无用

猜你喜欢

您可能感兴趣的文章: