<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<style>
#alllistaaa{
width: 600px;
height: 800px;
margin: 0 auto;
overflow: scroll;
}
#alllist>p{
width: 100px;
height: 100px;
background: rebeccapurple;
}
#loading{
width: 100px;
height: 100px;
border-radius: 50%;
margin: 0 auto;
line-height: 100px;
}
</style>
<body>
<div id="alllistaaa">
<div id="alllist">
</div>
<div id='loading'>加载中....</div>
</div>
<script>
var alllist = document.getElementById('alllist')
window.onload = function(){
console.log(alllist)
getList()
}
let vid = new IntersectionObserver( (e)=>{
if(e[0].isIntersecting){
setTimeout(()=>{
getList()
},1000)
}
},{
root:document.getElementById('alllistaaa'),
thresholds:1
});
vid.observe(document.getElementById('loading'))
function getList(){
for( let i = 0 ; i<10;i++ ){
var p = document.createElement("p");
var textNode = document.createTextNode('动态添加的p标签');
p.appendChild(textNode);
alllist.appendChild(p);
}
}
</script>
</body>
</html>
通过IntersectionObserver 实现上拉加载更多 js
最新推荐文章于 2024-06-20 20:20:21 发布