<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>滚动</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul li{
background-color: #eee;
border-bottom: 1px solid black;
text-align: center;
line-height: 60px;
list-style: none;
}
p{
text-align: center;
line-height: 65px;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li>第1行</li>
<li>第2行</li>
<li>第3行</li>
<li>第4行</li>
<li>第5行</li>
<li>第6行</li>
<li>第7行</li>
<li>第8行</li>
<li>第9行</li>
<li>第10行</li>
<li>第11行</li>
<li>第12行</li>
<li>第13行</li>
<li>第14行</li>
</ul>
<P class="title">加载更多。。。。</P>
</div>
<script src="jquery.js"></script>
<script type="text/javascript">
var num=15;
window.onscroll=function(){
var wHeight=document.documentElement.clientHeight;
var tHeight=document.documentElement.scrollHeight;
// console.log(tHeight+'--'+wHeight)
var sHeight=document.documentElement.scrollTop;
// console.log(sHeight)
var time=null;
if(sHeight>=tHeight-wHeight-20){
var index
if(time){
console.log(111111111111111111111111111111)
clearTimeout(time);
time=null;
}
time= setTimeout(function(){
var text=$('.title').html('加载更多')
for(let i=0,len=2;i<len;i++){
$("<li>第"+num+"行</li>").appendTo($('ul'))
num++
}
text.html('上拉加载更多')
},10)
}
}
</script>
</body>
</html>