<html>
<head>
<title>scroll</title>
<script type="text/javascript" src="javascript/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
var pageSize = 60;
var studentIndex = 0;
$(function () {
AddStudents();
$("#contain").scroll(function () {
var $this = $(this),
viewH = $(this).height(),//可见高度
contentH = $(this).get(0).scrollHeight,//内容高度
scrollTop = $(this).scrollTop();//滚动高度
//if(contentH - viewH - scrollTop <= 100) { //到达底部100px时,加载新内容
if (scrollTop / (contentH - viewH) >= 0.95) { //到达底部100px时,加载新内容
console.log(scrollTop);
AddStudents();
}
});
});
function AddStudents() {
var html = '';
for (var i = studentIndex; i < (studentIndex + pageSize) ; i++) {
var no = (i + 1);
var name = '张三' + (i + 1);
html += '<tr><td>' + no + '</td><td>' + name + '</td></tr>';
}
studentIndex += pageSize;
$('#mainTbody').append(html);
}
</script>
</head>
<body>
<div id="contain" style=" height:600px; overflow:auto;">
<table>
<thead>
<tr>
<td>学号</td>
<td>姓名</td>
</tr>
</thead>
<tbody id="mainTbody"></tbody>
</table>
</div>
</body>
</html>
Jquery实现滚轮滚到底事件
最新推荐文章于 2024-07-30 03:35:30 发布