Of Stack

The jQuery implementation determines the bottom of the scroll bar

  • 2020-06-19 09:46:47
  • OfStack

To determine the bottom of the scroll bar, three attribute values of DOM are used, namely, scrollTop, clientHeight, and scrollHeight.

scrollTop is the scrolling distance of the scroll bar on the Y axis.

clientHeight is the height of the visual area of the content.

scrollHeight is the height of the visual area of the content plus the overflow (scroll) distance.

As you can see from the introduction of the three attributes, the bottom condition of the scroll bar is scrollTop + clientHeight == scrollHeight.

Without further ado, code up (compatible with different browsers).

lazyload.js 



// The scroll bar in Y The rolling distance on the axis  
 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;
} 
 // The total height of the document  
 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;
} 
 // Browser viewport height  
 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>

This is the end of this article, I hope you enjoy it.

Related articles: