IntersectionObserver判断是否在可视区域详解
更新时间：2022年10月11日 14:03:31 作者：红浴巾
这篇文章主要为大家介绍了IntersectionObserver判断是否在可视区域详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
前言
在日常的开发过程中，有时候会有一些要求判断节点是否进入可视化区域的需求。例如：判断信息是否在可视区域曝光再进行曝光，图片懒加载等。通常我们可以通过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 判断可视区域的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了JavaScript检查数字是否为整数或浮点数的方法,涉及javascript类型判断的相关技巧,需要的朋友可以参考下2015-06-06
JavaScript 最近发布了一个方法 Object.groupBy,可以对可迭代对象中的元素进行分组,这篇文章主要介绍了JavaScript数组分组groupBy示例,需要的朋友可以参考下2023-12-12
javascript功能的强大之处是我们大家有目共睹的，几天小编向大家介绍Javascript 判断两个IP是否在同一网段，感兴趣的朋友可以参考一下2016-11-11
本文通过2个示例来给大家分享了下原生javascript结合ajax实现数据请求的方法以及原理，非常的简单实用，有需要的小伙伴可以参考下2016-04-04
这篇文章主要为大家详细介绍了微信小程序switch组件的实现方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-01-01
TypeScript是一种强大的编程语言,它在JavaScript的基础上添加了静态类型检查,使得代码更加可维护和类型安全,在TypeScript中,类和接口是构建复杂应用程序的关键组成部分,本文将深入探讨TypeScript中类与接口的使用,需要的朋友可以参考下2023-09-09
本文为大家介绍了一个简单的 JavaScript 项目，可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片，只需点击一下即可将其转换为 PDF 文件，感兴趣的可以动手尝试一下2022-07-07
好的朋友经常需要弹出信息，这个功能不错2008-09-09
这篇文章主要给大家介绍了关于uni-app小程序分享功能实现方法的相关资料,uni-app中有分享的API接口,但是需要现在QQ或者微信等开发者平台上注册账号,验证公司信息,而且只能分享图片或者文本等内容,需要的朋友可以参考下2023-07-07
本文主要介绍了js实现选项卡内容切换以及文字折叠和展开效果的示例代码。具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
最新评论