div滚动条滑动到底加载更多

最新推荐文章于 2023-10-03 15:48:42 发布

火蚂蚁cui

最新推荐文章于 2023-10-03 15:48:42 发布

阅读量730

点赞数

本文链接：https://blog.csdn.net/cuilei210/article/details/102521885

版权

<!DOCTYPE html>
<html>
<head>
<title>测试</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
	.div{
		overflow-y: scroll;
		height: 260px;
		width: 50%;
	}
	.table{
		text-align: center;
		width: 100%;
		border: 1px solid #bbb;
		border-collapse: collapse;
	}
</style>
</head>
<body>

<div class="div">
	<table class="table" >
		<thead class="thead">
			<th>时间</th>
			<th>数据1</th>
			<th>数据2</th>
			<th>数据3</th>
		</thead>
		<tbody class="tbody">
			
		</tbody>
	</table>
</div>

<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(function(){
	var html = '<tr><td>09:42:21</td><td>1</td><td>10</td><td>100</td></tr>'+
				'<tr><td>09:42:21</td><td>2</td><td>20</td><td>200</td></tr>'+
				'<tr><td>09:42:21</td><td>3</td><td>30</td><td>300</td></tr>'+
				'<tr><td>09:42:21</td><td>4</td><td>40</td><td>400</td></tr>'+
				'<tr><td>09:42:21</td><td>5</td><td>50</td><td>500</td></tr>'+
				'<tr><td>09:42:21</td><td>6</td><td>60</td><td>600</td></tr>'+
				'<tr><td>09:42:21</td><td>7</td><td>70</td><td>700</td></tr>'+
				'<tr><td>09:42:21</td><td>8</td><td>80</td><td>800</td></tr>'+
				'<tr><td>09:42:21</td><td>9</td><td>90</td><td>900</td></tr>'+
				'<tr><td>09:42:21</td><td>10</td><td>100</td><td>1000</td></tr>'+
				'<tr><td>09:42:21</td><td>20</td><td>200</td><td>2000</td></tr>'+
				'<tr><td>09:42:21</td><td>30</td><td>300</td><td>3000</td></tr>'+
				'<tr><td>09:42:21</td><td>40</td><td>400</td><td>4000</td></tr>'+
				'<tr><td>09:42:21</td><td>50</td><td>500</td><td>5000</td></tr>'+
				'<tr><td>09:42:21</td><td>60</td><td>600</td><td>6000</td></tr>'+
				'<tr><td>09:42:21</td><td>70</td><td>700</td><td>7000</td></tr>'+
				'<tr><td>09:42:21</td><td>80</td><td>800</td><td>8000</td></tr>'+
				'<tr><td>09:42:21</td><td>90</td><td>900</td><td>9000</td></tr>';
	$('.tbody').html(html);
	
	$('.div').scroll(function(){
		var viewH = $(this).height(),//可见高度
			contentH = $(this).get(0).scrollHeight,//内容高度
			scrollTop = $(this).scrollTop();//滚动高度
		
		console.log(viewH+','+contentH+','+scrollTop);
		
		if(contentH - viewH - scrollTop == 0) {
			$('.tbody').append(html);
		}
	})
})
</script>
</body>
</html>

火蚂蚁cui

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
div滚动条滑动到底加载更多

<!DOCTYPE html><html><head><title>测试</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><style type="text/css"> .div{ overflow-...
复制链接

扫一扫