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

Thanks to the original author: chua1989
Original link: https://www.jb51.net/article/76645.htm

brief introduction

This article mainly introduces in detail how js can scroll to the bottom of the page to continue loading. The principle is very simple. It is to add a scroll event to the window. Friends who need it can refer to it.

It should be said that this example can be very simple, and it is also possible to directly use the method of jQuery to process it. However, the underlying layer of this article uses native js for processing. You can analyze some small knowledge points and get some results.

principle

The principle is very simple. It is to add a scroll event to the window. Each time the browser triggers the scroll event, it determines whether it scrolls to the bottom of the browser. If it reaches the bottom, it loads new data. The key is to calculate whether the scroll bar scrolls to the bottom of the browser.

The algorithm is as follows:
Scroll bar roll up height + window height > total height of document - 50/ here I take the height of scroll response area as 50px/; If this judgment is true, it means that the scroll bar scrolls 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;
  /*Set the waiting bar horizontally in the middle of the window*/
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;

  /*Margin top: Auto and margin bottom: Auto cannot be set, or the bottom under IE will not work*/
  bottom: 30px;
 } 
 </style>
 <div class="waterfllow-loading">
  <img class="loading-progress" src="busy.gif">
 </div>
 <script type="text/javascript">
 //In image query, the browser main page scrolling event processing (waterfall flow) is in progress. Only the window mode can be used for binding. The document mode does not work
 $(window).on('scroll',function(){
 if(scrollTop() + windowHeight() >= (documentHeight() - 50/*The height of rolling response area is taken as 50px*/)){
  waterallowData();
 }
 });

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

  //Hide load bar
  $('.waterfllow-loading.active').removeClass('active');
  }
 });*/
 }

Get the height function that is rolled up at the top of the page

 //Get the height of the top of the page rolled up
 function scrollTop(){
 return Math.max(
  //chrome
  document.body.scrollTop,
  //firefox/IE
  document.documentElement.scrollTop);
 }

Note: chrome browser and Firefox/IE have different understanding of whether the scroll bar belongs to body or html, resulting in different processing.

Get the total height of the page document

 //Get the total height of the page document
 function documentHeight(){
 //Modern browsers (IE9+ and other browsers) and IE8 document Body Scrollheight and document Documentelement Scrollheight is OK
 return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
 }

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

Gets the height of the page browser viewport

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

document.compatMode

What needs to be explained here is document Compatmode. It's strange. It seems that I haven't met it in general.

Document Compatmode has two values, "BackCompat" and "CSS1Compat".

Official interpretation:

BackCompat: Standard compatibility mode is off.
CSS1Compat: Standard compatibility mode is enabled.

The rendering of box model by IE is very different in Standards Mode and Quirks Mode. The interpretation of box model in Standards Mode is the same as that in other standard browsers, but it is very different in Quirks Mode. When Doctype is not declared, ie defaults to Quirks Mode.

Give an example of how different the two modes are:

When document When compatmode is equal to "BackCompat", the width of the browser client area is document Body Clientwidth;

When document When compatmode is equal to CSS1Compat, the width of the browser client area is document Documentelement Clientwidth.

Other properties are similar.
　　
I won't mention it here, but we can foresee that the foundation stone of IE rendering has been changed due to the two modes. It can be imagined how different the constructed buildings will be.

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

Complete sample code

<!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;
  /*Set the waiting bar horizontally in the middle of the window*/
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;

  /*Margin top: Auto and margin bottom: Auto cannot be set, or the bottom under IE will not work*/
  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">

 //Get the height of the top of the page rolled up
 function scrollTop(){
 return Math.max(
  //chrome
  document.body.scrollTop,
  //firefox/IE
  document.documentElement.scrollTop);
 }
 //Get the total height of the page document
 function documentHeight(){
 //Modern browsers (IE9+ and other browsers) and IE8 document Body Scrollheight and document Documentelement Scrollheight is OK
 return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
 }
 //Gets the height of the page browser viewport
 function windowHeight(){
 //Document Compatmode has two values. BackCompat: Standard compatibility mode is off. CSS1Compat: Standard compatibility mode is enabled.
 return (document.compatMode == "CSS1Compat")?
 document.documentElement.clientHeight:
 document.body.clientHeight;
 }
 </script>
 <script type="text/javascript">
 //In image query, the browser main page scrolling event processing (waterfall flow) is in progress. Only the window mode can be used for binding. The document mode does not work
 $(window).on('scroll',function(){
 if(scrollTop() + windowHeight() >= (documentHeight() - 50/*The height of rolling response area is taken as 50px*/)){
  waterallowData();
 }
 });

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

  //Hide load bar
  $('.waterfllow-loading.active').removeClass('active');
  }
 });*/
 }
 </script> 
</html>

The picture of the loading bar inside is:

Actual use of my project

Demo address: http://school.lking.top/
Warehouse address: https://github.com/b84955189/TF-MIS
Source path address: /web/web-inf/front_ Stage_ View/home JSP

Tags: html Javascript

Posted by ju8ular1 on Tue, 31 May 2022 06:20:09 +0530

Programs Team