示例代码如下
<html>
<head>
<meta charset="utf-8">
<style>
.main {
height: 700px;
overflow: auto;
border: 1px solid blue;
}
/* 重点是.main有1个高度, 并且设置overflow: auto; */
.child {
border: 1px solid red;
margin-top: 20px;
color: grey;
height: 800px;
}
/* .child是什么样子并不重要 */
</style>
</head>
<body>
<form id="form1" runat="server">
<div>下拉加载更多</div>
<div class="main">
<div class="child"></div>
</div>
</form>
</body>
<script src="https://static.class4ever.com/jquery/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(function() {
$(".main").unbind("scroll").bind("scroll", function(e) {
var sum = this.scrollHeight;
if (sum <= $(this).scrollTop() + $(this).height()) {
$(".main").append($(".child").eq(0).clone()); //这里是演示, 真实情况应该是通过ajax得到并显示数据
}
});
});
</script>
</html>
如果要看滚动到页面底部自动刷新的方法, 可以看这篇文章