上拉加载

html

<div id="listCon">
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
</div>

js

<script type="text/javascript">
// 简单的防抖动函数
function debounce(func, wait) {
var timer;
return function() {
clearTimeout(timer);
timer = setTimeout(func, wait);
};
};
// 实际想绑定在 scroll 事件上的方法
function realFunc(){
if ((screen.height + window.scrollY) >= document.body.clientHeight) {
// 模拟网路请求 1s
setTimeout(function() {
var dom = document.querySelector("#thelist");
dom.innerHTML += `<div>
<p>我是内容</p>
</div>
`;
},1000)
}
}
// 滚动屏幕执行
window.addEventListener('scroll',debounce(realFunc, 200));
</script>