使用jquery框架实现滚动条分页/滚动条事件触发,简单明了
//滚动条事件 record-dataTable-tbody是被滚动的标签的ID,可以是div,table,table里面的tbody等
$("#record-dataTable-tbody").scroll(function(){
//滚动条位置
var scrollTop = $("#record-dataTable-tbody").scrollTop();
//可视窗口的高度
var viewportHeight = $("#record-dataTable-tbody").height();
//整个页面可以滚动的高度
var scrollHeight = $("#record-dataTable-tbody")[0].scrollHeight;
//“如果滚动条的位置”+“可视窗口的高度”=“整个页面可以滚动的高度”,那么就调用相应的函数加载数据
if(scrollTop+viewportHeight==scrollHeight){
//模仿数据加载函数 动态给table里面的tbody添加行
var htmll="";
for(var i=0;i<5;i++){
htmll+="<tr ><td >"+(i+1)+"</td>"
+"<td >11</td>"
+"<td >22</td>"
+"<td >33</td>"
+"<td >44</td>"
+"<td >55</td>"
+"<td >66</td>"
+"<td >77</td>"
+"<td >88</td>"
+"<td >99</td>"
+"<td >22</td>"
+"<td >33</td>"
+"<td >44</td>"
+"<td >55</td></tr>"
}
$("#record-dataTable-tbody").append(htmll);
}
});
有一个地方:
var scrollHeight = $("#record-dataTable-tbody")[0].scrollHeight;
这么取的原因是jQuery封装的对象是数组,再就是jQuery没有 scrollHeight() 方法