今天看到公司的需求列表有這樣的一個下拉更多的需求，發現之前沒寫過，都是用別人的，我大致順著想了一下，就是滾動監聽嘛，就寫寫，其實原理很簡單：

1. 先給父級設定一個固定高度（否則沒法監聽是否到達底部），
2. 對父級滾動監聽
3. 判斷是否到達底部，其公式：
   父級距離頂部的距離===父級裡面所有孩子的高度-父級自身的高度
4. 做出請求或者其他，我這裡每次新增了10個li標籤，當然後面也做了一個ajax請求案例。
5. 最後一步需要做的就是：如果到達最後一條應該終止迴圈函式，所以需要知道，資訊總共列表的長度，另外還有：
   
   • 最後一條如果恰好是10條，就容易了，到達條數，終止迴圈函式就行了，
   • 如果不足10條，需要將迴圈變數的終止值改為最終的資訊條數，執行迴圈函式，最終銷燬迴圈函式即可。

程式碼如下

• css

  *{margin: 0;padding: 0;}
      #box{
          height: 320px; 
          overflow-y: auto;}
      #box li{
          line-height: 50px;
      }
  
  
          #box li:nth-child(2n){background-color: #666; line-height: 60px; }
      }

• html
  
<ul id="box">
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
<li>li5</li>
<li>li6</li>
<li>li7</li>
<li>li8</li>
<li>li9</li>
<li>li10</li>
<li>li11</li>
<li>li12</li>
<li>li13</li>
<li>li14</li>
<li>li15</li>
<li>li16</li>
<li>li17</li>
<li>li18</li>
<li>li19</li>
<li>li20</li>
</ul>


• js

  // 滾動的次數
      var i=0;
      // 迴圈的最終值
      var m=0;
      $("#box").on("scroll",function () {
          // 計算出來孩子的高度
          var allchildHeight=0;
          $.each($("#box").children(),function (index,value) {
          allchildHeight+=value.offsetHeight;
          })
          if($(this).scrollTop()===allchildHeight-$(this
   
  ).height()){
              // ajax請求
              $.ajax({
                  url:"http://v.juhe.cn/movie/",
                  data:{
                      key:"***",
                      title:"夏天"
                  },
                  success:function (data) {
                      // console.log(data);
                      /*for(key in data.result[0]){
                          $("#box").append("<li>"+data.result[0][key]+"</li>")
                          console.log(data.result[0][key]);
                      }*/
                  }
              })
              // 迴圈的終止值是個變數
              m=10*i+10;
              // 如果到達了最終的條數
              if(i==9){
                  $("#box").off("scroll");
                  // 假設最終的條數是95,最終迴圈終止到從91-95
                  m=95;
                  // 迴圈
                  Refresh();
                  // 廢除迴圈函式
                  Refresh=null;
              }
              // 沒有到達
              else{
                  Refresh();    
              }
  
          }
      })
  //迴圈函式
  function Refresh() {
  for(n=10*i+1;n<=m;n++){
  console.log(n);
  $("#box").append("<li>linew"+n+"</li>");
  }
  i++;
  }