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