js implements the scroll bar to scroll to the bottom of the page and continue loading

js implements the scroll bar to scroll to the bottom of the page and continue loading_javascript skills

WBOY

Release： 2016-05-16 15:24:38

Original

1706 people have browsed it

This example should be said to be very simple, and it can also be processed directly using jQuery methods. However, the bottom layer of this article is processed using native js. If you encounter some small knowledge points, you can analyze them and it will be worthwhile.

The principle is very simple, just add a scroll event to the window. Each time the browser triggers the scroll event, it will determine whether it has scrolled to the bottom of the browser, and if it reaches the bottom, load new data. The key is to calculate whether the scroll bar has scrolled to the bottom of the browser. The algorithm is as follows

Scroll bar rolled up height + window height> total height of document + 50/*I will take the height of the scrolling response area to 50px*/; if this judgment is true means the scroll bar has scrolled to the bottom.

Example

  <style type="text/css">
  html,body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td{
   margin: 0;
   padding:0;
  }
  *{
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
  }
   .waterfllow-loading{
   z-index: 2000;
   display:none;
  }
  .waterfllow-loading.active{
   display:block;
  }
  .waterfllow-loading img.loading-progress{
   position: fixed;
   /*设置等待条水平居于窗口正中*/
   margin-left: auto;
   margin-right: auto;
   left: 0;
   right: 0;

   /*不能设置margin-top:auto和margin-bottom:auto否则IE下bottom就不顶用了*/
   bottom: 30px;
  } 
  </style>
  <div class="waterfllow-loading">
   <img class="loading-progress" src="busy.gif">
  </div>
 <script type="text/javascript">
 //图片查询中正对浏览器主页面滚动事件处理(瀑布流)。只能使用window方式绑定，使用document方式不起作用
 $(window).on('scroll',function(){
  if(scrollTop() + windowHeight() >= (documentHeight() - 50/*滚动响应区域高度取50px*/)){
   waterallowData();
  }
 });

 function waterallowData(){
  $('.waterfllow-loading').addClass('active');
  
  /*$.ajax({
   url:url,
   type:"post",
   data: params,
   success:function(data,textStatus,jQXHR){
    //添加数据
    ...

    //隐藏加载条
    $('.waterfllow-loading.active').removeClass('active');
   }
  });*/
 }

Copy after login

Get the rolled-up height function at the top of the page

 //获取页面顶部被卷起来的高度
 function scrollTop(){
  return Math.max(
   //chrome
   document.body.scrollTop,
   //firefox/IE
   document.documentElement.scrollTop);
 }

Copy after login

Chrome browser and Firefox/IE have different understandings of whether the scroll bar belongs to body or html, resulting in different processing.

Get the total height of the page document

 //获取页面文档的总高度
 function documentHeight(){
  //现代浏览器（IE9+和其他浏览器）和IE8的document.body.scrollHeight和document.documentElement.scrollHeight都可以
  return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
 }

Copy after login

This algorithm is consistent with jQuery’s method of calculating document height.

Get the height of the page browser viewport

 function windowHeight(){
  return (document.compatMode == "CSS1Compat")&#63;
  document.documentElement.clientHeight:
  document.body.clientHeight;
 }

Copy after login

What needs to be explained here is document.compatMode. It's very strange, and it seems that I have never encountered it in general.

　document.compatMode has two values: "BackCompat" and "CSS1Compat". The official explanation is BackCompat: Standard compatibility mode is turned off. CSS1Compat: Standards compatibility mode is turned on.
IE's rendering of the box model is very different between Standards Mode and Quirks Mode. The interpretation of the box model in Standards Mode is the same as that of other standard browsers, but there is a big difference in Quirks Mode. Without declaring Doctype, IE defaults to Quirks Mode.
Give an example to illustrate the difference between the two modes.

When document.compatMode is equal to "BackCompat", the browser client area width is document.body.clientWidth;

When document.compatMode is equal to CSS1Compat, the browser client area width is document.documentElement.clientWidth.

There are other similar attributes. I won’t go into details here, but we can foresee that the two modes will cause the cornerstones of IE rendering to change. You can imagine how different the buildings constructed will be.

So please declare Doctype for each page is not only a good habit, but also a necessary process. Quirks Mode can go into the trash.

Ok, here’s the complete code, with a small example (no data refresh in the background, just a waiting bar)

<!DOCTYPE html>
<html lang="ch-cn">
 <head>
　　<meta charset="utf-8">
　　<script type="text/javascript" src='jquery-1.9.1.js'></script>
  <style type="text/css">
  html,body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td{
   margin: 0;
   padding:0;
  }
  *{
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
  }
   .waterfllow-loading{
   z-index: 2000;
   display:none;
  }
  .waterfllow-loading.active{
   display:block;
  }
  .waterfllow-loading img.loading-progress{
   position: fixed;
   /*设置等待条水平居于窗口正中*/
   margin-left: auto;
   margin-right: auto;
   left: 0;
   right: 0;

   /*不能设置margin-top:auto和margin-bottom:auto否则IE下bottom就不顶用了*/
   bottom: 30px;
  } 
  </style>
 </head>
 <body style="background:#ff0;height:1000px;">
  <div class="waterfllow-loading">
   <img class="loading-progress" src="busy.gif">
  </div>
 </body>
 <script type="text/javascript">

 //获取页面顶部被卷起来的高度
 function scrollTop(){
  return Math.max(
   //chrome
   document.body.scrollTop,
   //firefox/IE
   document.documentElement.scrollTop);
 }
 //获取页面文档的总高度
 function documentHeight(){
  //现代浏览器（IE9+和其他浏览器）和IE8的document.body.scrollHeight和document.documentElement.scrollHeight都可以
  return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
 }
 //获取页面浏览器视口的高度
 function windowHeight(){
  //document.compatMode有两个取值。BackCompat：标准兼容模式关闭。CSS1Compat：标准兼容模式开启。
  return (document.compatMode == "CSS1Compat")&#63;
  document.documentElement.clientHeight:
  document.body.clientHeight;
 }
 </script>
 <script type="text/javascript">
 //图片查询中正对浏览器主页面滚动事件处理(瀑布流)。只能使用window方式绑定，使用document方式不起作用
 $(window).on('scroll',function(){
  if(scrollTop() + windowHeight() >= (documentHeight() - 50/*滚动响应区域高度取50px*/)){
   waterallowData();
  }
 });

 function waterallowData(){
  $('.waterfllow-loading').addClass('active');
  
  /*$.ajax({
   url:url,
   type:"post",
   data: params,
   success:function(data,textStatus,jQXHR){
    //添加数据
    ...

    //隐藏加载条
    $('.waterfllow-loading.active').removeClass('active');
   }
  });*/
 }
 </script> 
</html>

Copy after login

The loading bar picture inside

The above is an example of how to scroll to the bottom of the page and continue loading. I hope it will be helpful to everyone's learning.