标签：io app 简单 height item background 使用 close IntersectionObserver
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
list-style: none;
text-decoration: none;
}
::-webkit-scrollbar{
display: none;
}
#app{
margin: 20px auto 0;
width:800px;
height: 400px;
overflow: scroll;
background:skyblue;
}
#app li{
margin-bottom: 5px;
width: 100%;
height: 60px;
line-height: 60px;
text-align: center;
background:#16c3a2;
}
</style>
</head>
<body>
<ul id="app">
<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>
</ul>
<button id="close">关闭观察器</button>
<script>
const app = document.querySelector('#app')
const close = document.querySelector('#close')
const io = new IntersectionObserver((entries,observer)=>{
entries.forEach(item=>{
//出现在视口时
if(item.isIntersecting){
item.target.style.background = 'orange'
//离开视口区域
}else{
item.target.style.background = '#16c3a2'
}
})
},
{
root:app,
rootMargin: '0px 0px 50px 0px', // 页面底部50px开始加载
threshold: 0.1 // 当目标元素10%可见时触发回调
});
//观察所有图片
Array.from(app.children).forEach(item=>{
io.observe(item)
})
close.onclick = function(){
io.disconnect()
}
</script>
</body>
</html>
标签：io,
app,
简单,
height,
item,
background,
使用,
close,
IntersectionObserver
From： https://blog.csdn.net/qq_55139096/article/details/139081517