天天看点

滚动条分页/滚动条事件触发

使用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() 方法

滚动条分页/滚动条事件触发