ajax没有滚动条,Jquery AJAX实现滚动条下拉分页

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 = '

' ' ' val.stationName '' ' ' val.doorControlName '' ' ' val.personName '' ' ' val.eventTime '' '

'

});

$("#result").append(html);

}

}

}

});

}

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