实现鼠标滚轮触底后,隔一秒,在原来的div后添加3个新div
<div class='top'></div>
<div class='content'>
<div class='dv'>aaaaaaaa</div>
<div class='dv'>aaaaaaaa</div>
<div class='dv'>aaaaaaaa</div>
<div class='dv'>aaaaaaaa</div>
<div class='dv'>aaaaaaaa</div>
<div class='dv'>aaaaaaaa</div>
<span>加载中...</span>
</div>
<script>
window.onscroll = function () {
// 窗口可视高度 + 滚轮距滚轮顶部的距离 == 滚轮的长度
if (document.documentElement.clientHeight + document.documentElement.scrollTop == document.documentElement.scrollHeight||
document.body.clientHeight + document.body.scrollTop == document.body.scrollHeight) {
setTimeout(function () {
var dv = document.getElementsByClassName('dv'); //获取原来的dv
for (var i = 0; i < 3; i++) { //循环出3个新div
var newdv = document.createElement('div'); //创建新的节点div
newdv.innerHTML = 'aaaaaaaa'; //新div中的内容
newdv.setAttribute('class', 'dv'); //给新div添加class样式
dv[dv.length - 1].after(newdv); //在最后一个dv后添加新的div
}
}, 1000) //滚轮触底后隔一秒添加三个新div(模拟调接口时所需时间)
}
}
</script>