看到蛮多写IntersectionObserver的博客的,但是感觉里面关键部分都介绍的模棱两可,所以我来简单说说这个。至于什么是IntersectionObserver,官网上有 IntersectionObserver,我就不去一一阐述了,下面说最关键的点和使用场景!
javascript
new IntersectionObserver(
function (entries) {
// entries[0].isIntersecting
},
{
rootMargin: "0px 0px 0px 0px"
}
)
关键点
设置上边距,当前元素的下边框监测会更早出现更晚消失。
设置下边距,当前元素的上边框监测会更早出现更晚消失。
并且rootMargin必须要设置px或者百分比,这百分比是相对视口高度来说的,所以说一般建议使用px,如:"30px 0px 0px 0px" 或者 "10% 0px 0px 0px",必须要带px,不能只写数值否则无效。
场景
有预懒加载的地方大概率会使用到IntersectionObserver,比如向上滑动时,如果图片或者其他dom比较多时,当滑到才渲染可能来不及,所以需要提前一段距离就开始渲染
示例源码
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IntersectionObserver-rootMargin</title>
<style>
* {
padding: 0;
margin: 0;
}
.white-dom {
height: 710px;
}
#target {
background: rgb(237, 28, 36);
height: 100px;
outline: 33px solid rgba(0, 0, 0, 0.2);
}
#info {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 2rem;
}
</style>
</head>
<body>
<div class="white-dom"></div>
<div id="target"></div>
<div class="white-dom"></div>
<span id="info">初始化</span>
<script>
const io = new IntersectionObserver(
function (entries) {
console.log('IntersectionObserver触发');
document.getElementById("info").innerHTML = entries[0].isIntersecting
? "元素显示"
: "元素隐藏";
},
{
rootMargin: "0px 0px 33px 0px"
}
);
io.observe(document.getElementById("target"));
</script>
</body>
</html>