1、代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- <script src="./js/jquery-3.7.1"></script> -->
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js" rel="external nofollow"></script>
</head>
<style>
.sc {
overflow: auto;
width: 500px;
height: 300px;
border: 1px solid;
margin: 80px auto;
padding-bottom: 10px;
}
ul>li {
margin: auto;
margin-top: 10px;
width: 90%;
height: 30px;
background-color: skyblue;
border-radius: 5px;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
</style>
<body>
<div class="sc">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
$(function() {
$('.sc').scroll(function() {
if (this.scrollTop + this.clientHeight >= this.scrollHeight) {
setTimeout(function() {
console.log('到底了!');
var li = '';
for (var i = 0; i < 10; i++) {
li += '<li></li>'
}
$('ul').append(li);
}, 500)
}
})
})
</script>
</body>
</html>
2、效果图如下:滚动到底部后会加载新的列表元素