Jquery+AJAX實現滾動條下拉分頁

<script>
    <!-- 實現滾動條滾動start -->
    var pageNum = 1;  // 當前頁碼
    var pageSize =10; // 當前每頁條數
    var pageCount=0;//總頁數
    var winH = $('#div1').height();//頁面可視區域高度  
    var p=0, t=0; // 頂部和底部的距離
    $(function(){
        getData();//初始獲取數據，加載數據事件
        //鼠標滾動事件   
        $('#div1').scroll(function() {
            var pageH = $('#result').height(); //當前文檔總高度
            var scrollT = $('#div1').scrollTop();  //滾動條top的值   
            var bottomH = (pageH - winH - scrollT) / winH;  // 當前所滾動位置到底部距離
            p = $(this).scrollTop(); //頂部距離
            if(t <= p){ // 判斷是否下滾  
                if (bottomH < 0.01) {  
                   if (pageNum !== pageCount) {
                       pageNum++;
                       getData();
                   }else{ //沒有數據
                      $(".nodata").show().html("別滾動了，已經到底了...");
                   }
                }
            }
            setTimeout(function(){t = p;},2000);//延時2秒   
        });  

    })
    function getData() {
        var html = '';
        $.ajax({
            type: "post",
            url:"路徑",
            data:{"pageNum":pageNum,"pageSize":pageSize},
            success: function (result) {
                if(result.success){
                    pageCount=result.data.pageCount;
                    var list = result?result.data.rows:null;
                    if (list!=null) {
                        $.each(list, function(index, val) {
                            html += '<div class="item-info">'+'<span>'+val.stationName+'</span>'+'<span>'+val.doorControlName+'</span>'+'<span>'+val.personName+'</span>'+'<span>'+val.eventTime+'</span>'+'</div>'
                        });
                        $("#result").append(html);
                    }
                }
            }
        });
    }
   <!--end-->
</script>

<div id="div1" class="nui-scroll">
     <div id="result"> </div>   
     <div class="nodata"></div>            
 </div>

css代碼

.nui-scroll{
         border: 1px solid #000;
         width: 450px;
         height: 300px;
         overflow-y:scroll
       }
      .item-info {
          height: 30px;
          font-size:18px;
          background:  #339999;
          color: #fff;
      }
     .nodata{
         font-size:20px;
         text-align:center;
         margin-bottom: 15px;
     }
     span{
         margin-left: 15px;
} 

注意：

這里要用append添加內容，不用html

兩者都是在某一個元素的內部添加內容。
區別在於：append是在原有基礎上增加，html中是替換當前所有內容