JS implementation scroll bar scrolling to the bottom of the page continue to load _javascript tips

This example should be said to be very simple, the direct use of jquery method to deal with is also possible. But the bottom of this article use the original JS to deal with, encounter some small knowledge points can be analyzed as well as income.

The simple principle is to add a scroll event to the window, and the browser will decide whether to scroll to the bottom of the browser every time the scroll event is triggered, and load the new data if it's at the bottom. The key is to calculate whether the scroll bar scrolls to the bottom of the browser, and the algorithm follows

scroll bar height + window Height > Document total height +/* I will scroll the response area height 50px*/; If this is true, the scroll bar scrolls to the bottom.

Instance

  <style type= "Text/css" > Html,body, div, DL, DT, DD, UL, OL, Li, H1, H2, H3, H4, H5, H6, pre, Code, form, fields
   ET, 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;
   /* Set the waiting bar level in the center of the window * * * MARGIN-LEFT:AUTO;
   Margin-right:auto;
   left:0;

   right:0;
  /* Can not set Margin-top:auto and Margin-bottom:auto otherwise ie under the bottom will not be able to do the bottom:30px; } </style> <div class= "waterfllow-loading" >  < /div> <script type= "Text/javascript" >//Picture queries are scrolling event handling (waterfall flow) on the browser's home page. Can only be bound using window mode, the document method does not work with $ (window). On (' scroll ', function () {if (scrolltop () + windowheight () >= ( Documentheight ()-50/* scrollingResponse area height (50px*/)) {waterallowdata ();

 }
 });
  
  function Waterallowdata () {$ ('. Waterfllow-loading '). addclass (' active ');

    /*$.ajax ({url:url, type: "Post", Data:params, Success:function (DATA,TEXTSTATUS,JQXHR) {//Add data ...)
   Hides the load bar $ ('. Waterfllow-loading.active '). Removeclass (' active ');

 }
  });*/
 }

Gets the height function of the top of the page being rolled up

 Gets the height function that was rolled up at the top of the page
 scrolltop () {return
  Math.max (
   //chrome
   document.body.scrollTop,
   // firefox/ie
   document.documentElement.scrollTop);
 }

The Chrome browser and the firefox/ie are different because the scroll bar belongs to the body or HTML understanding.

Get the total height of the page document

 Gets the total height function of the page document
 Documentheight () {
  //modern browser (ie9+ and other browsers) and IE8 Document.body.scrollHeight and Document.documentElement.scrollHeight can return
  Math.max ( document.body.scrollheight,document.documentelement.scrollheight);
 }

This algorithm is consistent with the way jquery calculates the document height.

Get the height of the page browser viewport

 function WindowHeight () {return
  (Document.compatmode = = "Css1compat")?
  Document.documentElement.clientHeight:
  document.body.clientHeight;
 }

What needs to be explained here is Document.compatmode this dongdong. Very unfamiliar, the general situation seems not to have encountered.

Document.compatmode has two values "Backcompat" and "css1compat". The official explanation is Backcompat: Standard compatibility mode shutdown. Css1compat: Standard compatibility mode is open.
The rendering of the box model in IE is very different from the standards mode and quirks mode, and the interpretation of the box model under Standards mode is the same as that of other standard browsers, but in quirks mode, there is a big difference. In the case of not declaring doctype, IE defaults to quirks mode.
Give an example of how much the difference between the two patterns is.

When the Document.compatmode equals "Backcompat", the browser client area width is document.body.clientWidth;

When Document.compatmode equals Css1compat, the browser client area width is document.documentElement.clientWidth.

There are other properties that are similar. This is not said here, but we can foresee that the two patterns lead to IE rendering the cornerstone of the change, imagine the building of the difference between the buildings when how big.

So please declare doctype for each page is not only a good habit, but also a necessary treatment. Quirks mode can be in the garbage heap.

Okay, here's a complete code with a small example (no background brush data, just show the wait bar)

<! DOCTYPE html>  

Inside the load bar picture is

The above is the scroll bar scrolling to the bottom of the page to continue to load processing examples, I hope to help you learn.