IntersectionObserver判断是否在可视区域详解_javascript技巧_

前言

在日常的开发过程中，有时候会有一些要求判断节点是否进入可视化区域的需求。例如：判断信息是否在可视区域曝光再进行曝光，图片懒加载等。通常我们可以通过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

浏览器兼容性

不兼容Safari 12.1以下和Firefox for Android 55以下，具体可以看MDN。 可以使用polyfill版解决该问题。

注意

当target元素已在root可视范围，但是被其他元素遮盖住了，该target是否被其他元素遮盖不可判断。

以上就是IntersectionObserver判断是否在可视区域详解的详细内容，更多关于IntersectionObserver 判断可视区域的资料请关注其它相关文章！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！