前言
在日常的开发过程中 ，有时候会有一些要求判断节点是否进入可视化区域的需求 。例如：判断信息是否在可视区域曝光再进行曝光 ，图片懒加载等 。通常我们可以通过scroll和getBoundingclient来进行判断 。
el.offsetTop - document.documentElement.scrollTop <= 视口高度
// 或
el.getBoundingClientRect().top <= 视口高度
但是scroll ，getBoundingclient会引起回流 ，计算过于频繁可能会引起很大的性能问题 ，例如用户在使用的过程中 ，滑动卡顿啊等 。那么有没有更好的办法来代替判断是否进入可视化区域呢？使用IntersectionObserver即可解决这种烦恼 。
概念
Intersection Observer API 提供了一种异步检测目标元素与祖先元素或viewport相交情况变化的方法 。浏览器显示页面的时候 ，首先会用js处理逻辑 ，然后进行样式计算及布局 ，在内存里面形成之后会画我们的屏幕上去 ，这一个过程就叫1帧 ，如果1帧中任一个阶段占用的时间过长 ，就会影响到我们的平均帧率 ，导致掉帧等 。而IntersectionObserver会在浏览器空闲的时候 ，也就是帧空闲的时候才去执行 ，不会一直占用我们的主线程 ，从而提高了性能及体验 。
使用
IntersectionObserver接收2个参数callback和options 。具体可见MDN
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
width: 500px;
height: 500px;
border: 1px salmon solid;
overflow-y: scroll;
}
.box2 {
width: 100px;
height: 1000px;
background: red;
}
.box3 {
width: 100px;
height: 100px;
background: blue;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<div class="box3" id="box3"></div>
</div>
<script>
let options = {
root: document.querySelector(#box1),
rootMargin: 0px,
threshold: 1.0
}
let callback = (entries, observer) => {
entries.forEach(entry => {
// entry.boundingClientRect
// 目标元素的区域信息 ，getBoundingClientRect()的返回值
// entry.intersectionRatio
// 目标元素的可见比例
// entry.intersectionRect
// 目标元素与根元素交叉的区域信息
// entry.isIntersecting
// 目标元素是否进入根元素区域
// entry.rootBounds
// 根元素的矩形区域信息
// entry.target
// 被观察dom节点
// entry.time
// 相交发生时距离页面打开时的毫秒数
});
};
let observer = new IntersectionObserver(callback, options);
let target = document.querySelector(#box3);
observer.observe(target);
</script>
</body>
</html>
浏览器兼容性
不兼容Safari 12.1以下和Firefox for Android 55以下 ，具体可以看MDN 。 可以使用polyfill版解决该问题 。
注意
当target元素已在root可视范围 ，但是被其他元素遮盖住了 ，该target是否被其他元素遮盖不可判断 。
以上就是IntersectionObserver判断是否在可视区域详解的详细内容 ，更多关于IntersectionObserver 判断可视区域的资料请关注本站其它相关文章！
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
