IntersectionObserver判断是否在可视区域详解
作者:红浴巾
这篇文章主要为大家介绍了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 判断可视区域的资料请关注脚本之家其它相关文章!