js implementiert die Bildlaufleiste, um zum Ende der Seite zu scrollen und mit dem Laden von Javascript-Kenntnissen fortzufahren

Dieses Beispiel ist sehr einfach und kann auch direkt mit der jQuery-Methode verarbeitet werden. Die unterste Ebene dieses Artikels wird jedoch mit nativem js verarbeitet. Wenn Sie auf einige kleine Wissenspunkte stoßen, können Sie diese analysieren, und es wird sich lohnen.

Das Prinzip ist sehr einfach: Fügen Sie einfach ein Scroll-Ereignis zum Fenster hinzu. Jedes Mal, wenn der Browser das Scroll-Ereignis auslöst, wird festgestellt, ob zum unteren Rand des Browsers gescrollt wurde Unten angekommen, laden Sie neue Daten. Der Schlüssel besteht darin, zu berechnen, ob die Bildlaufleiste bis zum unteren Rand des Browsers gescrollt wurde. Der Algorithmus ist wie folgt

Bildlaufleiste hochgerollt, Fensterhöhe> Die Gesamthöhe des Dokuments beträgt 50/*Ich nehme die Höhe des Bildlauf-Antwortbereichs auf 50 Pixel*/; Das Urteil ist wahr, dann zeigt an, dass die Bildlaufleiste nach unten gescrollt wurde.

Beispiel

  <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');
   }
  });*/
 }

Holen Sie sich die Rollup-Höhenfunktion des oberen Seitenrands

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

Der Chrome-Browser und Firefox/IE verstehen unterschiedlich, ob die Bildlaufleiste zum Textkörper oder zum HTML-Code gehört, was zu einer unterschiedlichen Verarbeitung führt.

Ermitteln Sie die Gesamthöhe des Seitendokuments

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

Dieser Algorithmus stimmt mit der jQuery-Methode zur Berechnung der Dokumenthöhe überein.

Ermitteln Sie die Höhe des Seitenbrowser-Ansichtsfensters

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

Was hier erklärt werden muss, ist document.compatMode. Es ist sehr seltsam und es scheint, dass ich es im Allgemeinen noch nie erlebt habe.

Document.compatMode hat zwei Werte: „BackCompat“ und „CSS1Compat“. Die offizielle Erklärung lautet BackCompat: Der Standardkompatibilitätsmodus ist deaktiviert. CSS1Compat: Der Standardkompatibilitätsmodus ist aktiviert.
Die Darstellung des Box-Modells durch den IE unterscheidet sich stark zwischen dem Standardmodus und dem Quirks-Modus. Die Interpretation des Box-Modells im Standardmodus ist die gleiche wie bei anderen Standardbrowsern, es gibt jedoch einen großen Unterschied im Quirks-Modus Standardmäßig ist der Quirks-Modus aktiviert.
Geben Sie ein Beispiel, um den Unterschied zwischen den beiden Modi zu veranschaulichen.

Wenn document.compatMode gleich „BackCompat“ ist, beträgt die Breite des Browser-Clientbereichs document.body.clientWidth;

Wenn document.compatMode gleich CSS1Compat ist, beträgt die Breite des Browser-Clientbereichs document.documentElement.clientWidth.

Es gibt andere ähnliche Attribute. Ich werde hier nicht auf Details eingehen, aber wir können absehen, dass sich durch die beiden Modi die Grundpfeiler des IE-Renderings ändern werden. Sie können sich vorstellen, wie unterschiedlich die gebauten Gebäude sein werden.

Bitte deklarieren Sie also, dass Doctype für jede Seite nicht nur eine gute Angewohnheit, sondern auch ein notwendiger Prozess ist. Der Quirks-Modus kann in den Papierkorb wandern.

Ok, hier ist der vollständige Code mit einem kleinen Beispiel (keine Datenaktualisierung im Hintergrund, nur eine Warteleiste)

<!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>

Das Bild der Ladeleiste in

ist

Das Obige ist ein Beispiel dafür, wie man zum Ende der Seite scrollt und mit dem Laden fortfährt. Ich hoffe, es wird für das Lernen aller hilfreich sein.