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

来源：https://www.icode9.com/content-4-323951.html