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

2 篇文章 0 订阅

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




  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值