一,问题描述
- 页面的数据浏览完后是需要加载的,当浏览到页面底部时,没有了内容,滚动滚动条就会自动加载后面的数据。
二,效果预览
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/97635fa814aa21834df3f59ef66cd364.gif)
三,用到的主要事件
- window.onload:页面加载事件
- window.onscroll:滚动条滚动事件
四,完整代码
- 代码结构
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/ec0cac08df9d6e8f44e594f4dd7bd90d.png)
- Html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<link rel="stylesheet" type="text/css" href="../css/autoAdd.css"/>
<script type="text/javascript" src="../js/autoAdd.js" charset="UTF-8" ></script>
<body>
<div id="all">
<div >
1
</div>
</div>
</body>
</html>
*{
padding: 0px;
margin: 0px;
}
#all{
width: 600px;
margin: 0 auto;
text-align: center;
border: 1px solid red;
position: relative;
}
#all div{
width: 200px;
height: 100px;
border: 1px solid blue;
margin: 10px 34%;
text-align: center;
position: absolute;
}
window.onload=function(){
all=document.getElementById("all");
getData;
num=1;
var lis=all.getElementsByTagName("div");
}
window.onscroll=function(){
Add();
}
function Add(){
if(isCheckAdd()){
var newDiv=document.createElement("div");
newDiv.innerHTML=num+1;
newDiv.style.top=num*(120)+"px";
num++;
all.appendChild(newDiv);
}
}
function isCheckAdd(){
var lis=all.getElementsByTagName("div");
console.log("length="+lis.length)
var lastDiv=lis[lis.length-1];
console.log("lastDiv的Top="+document.defaultView.getComputedStyle(lastDiv,null).top);
return (getData.eleT(lastDiv).y<=getData.scrollT().y+getData.clientH().y)?true:false;
}
getData={
eleT:function(obj){
var marginTop=obj.style.top?
obj.style.top:document.defaultView.getComputedStyle(obj,null).marginTop;
marginTop=parseInt(marginTop);
console.log("marginTop="+marginTop)
var height=obj.style.height||document.defaultView.getComputedStyle(obj,null).height;
height=parseInt(height);
console.log("height="+height)
var halfH=Math.ceil(height/2);
var eleT=marginTop+halfH;
return new this.result(parseInt(eleT));
}
,
scrollT:function(){
var scrollT=document.documentElement.scrollTop?
document.documentElement.scrollTop:document.body.scrollTop;
var scrollL=document.documentElement.scrollLeft?
document.documentElement.scrollLeft:document.body.scrollLeft;
console.log("scrollT="+scrollT+" : scrollL="+scrollL);
return new this.result(scrollT);
},
clientH:function(){
var clientH=document.documentElement.clientHeight;
console.log("clientH="+clientH);
return new this.result(clientH);
},
result:function(y){
this.y=y;
}
}
五,效果演示
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/8b1909cf9a74c361def4ad75b28cd367.gif)