说说IntersectionObserver交叉观察器

手机用户

前言过去，要检测一个元素是否可见或者两个元素是否相交并不容易，很多解决办法不可靠或性能很差。然而，随着互联网的发展，这种需求却与日俱增，比如，下面这些情况都需要用到相交检测：图片懒加载——当图片滚动到可见时才进行加载内容无限滚动——也就是用户滚动到接近内容底部时直接加载更多，而无需用户操作翻页，给用户一种网页可以无限滚动的错觉检测广告的曝光情况——为了计算广告收益，需要知道广告元素的曝光情况在用户看见某个区域时执行任务或播放动画过去，相交检测通常要用到事件监听，并且需要频繁调用`Element.getBoundingClientRect()`[1]方法以获取相关元素的边界信息。事件监听和调用`Element.getBoundingClientRect()`[2]都是在主线程上运行，因此频繁触发、调用可能会造成性能问题。这种检测方法极其怪异且不优雅。IntersectionObserverAPI会注册一个回调函数，每当被监视的元素进入或者退出另外一个元素时(或者viewport[3])，或者两个元素的相交部分大小发生变化时，该回调方法会被触发执行。这样，我们网站的主线程不需要再为了监听元素相交而辛苦劳作，浏览器会自行优化元素相交管理。用法1.介绍IntersectionObserverAPI提供了一种异步检测目标元素与祖先元素或viewport[4]相交情况变化的方法letio=newIntersectionObserver(callback,options);上面代码中，IntersectionObserver是浏览器原生提供的构造函数，接受两个参数：callback是可见性变化时的回调函数，option是配置对象（该参数可选）。构造函数的返回值是一个观察器实例。实例的observe方法可以指定观察哪个DOM节点。2.方法方法说明observe()开始监听一个目标元素unobserve()停止监听特定目标元素takeRecords()返回所有观察目标的IntersectionObserverEntry对象数组disconnect()使IntersectionObserver对象停止全部监听工作root用来获取当前intersectionObserver实例的根元素（只读）rootMargin与CSS属性`margin`[5]语法相似的字符串(string)对象。在交叉检测开始之前，由rootMargin规定的矩形的每一边都会被添加至`root`[6]元素的边框盒的相应边（只读）thresholds一个包含阈值的列表，按升序排列，列表中的每个阈值都是监听对象的交叉区域与边界区域的比率（只读）//开始观察io.observe(document.getElementById('example'));//停止观察io.unobserve(element);//关闭观察器io.disconnect();上面代码中，observe的参数是一个DOM节点对象。如果要观察多个节点，就要多次调用这个方法。io.observe(elementA);io.observe(elementB);3.callback参数callback以下情况会被调用：每当目标(target)元素与设备视窗或者其他指定元素发生交集的时候执行Observer第一次监听目标元素的时候接收一个参数entries，即IntersectionObserverEntry实例。描述了目标元素与root的交叉状态。具体参数如下：属性说明boundingClientRect返回包含目标元素的边界信息，返回结果与element.getBoundingClientRect()相同intersectionRatio返回目标元素出现在可视区的比例intersectionRect用来描述root和目标元素的相交区域isIntersecting返回一个布尔值，下列两种操作均会触发callback：1.过渡从不相交到相交，返回true。2.过渡从相交到不相交，返回falserootBounds用来描述交叉区域观察者(intersectionobserver)中的根.target目标元素：与根出现相交区域改变的元素(Element)time表示相交更改发生的时间相对于文档创建的时间,单位为毫秒isVisible布尔值，目标元素是否可见（该属性还在试验阶段，不建议在生产环境中使用）4.options参数options是一个对象，控制观察者的回调函数的被调用时的环境，也可以不填。共有三个属性，具体如下：属性说明root指定根(root)元素，用于检查目标的可见性。必须是目标元素的父级元素。如果未指定或者为null，则默认为浏览器视窗rootMargin根(root)元素的外边距。类似于CSS中的`margin`[7]属性，比如"10px20px30px40px"(top,right,bottom,left)。如果有指定root参数，则rootMargin也可以使用百分比来取值。该属性值是用作root元素和target发生交集时候的计算交集的区域范围，使用该属性可以控制root元素每一边的收缩或者扩张。默认值为0。threshold可以是单一的number也可以是number数组，target元素和root元素相交程度达到该值的时候IntersectionObserver注册的回调函数将会被执行。默认值是0(意味着只要有一个target像素出现在root元素中，回调函数将会被执行)5.简单示例代码如下：不设置options默认为浏览器视窗，结果如下图：应用1.图片懒加载效果如图示：2.内容无限滚动加载更多...效果如图示：3.曝光埋点Slide{{index}}效果如图：兼容性当前浏览器对于IntersectionObserver的支持性：IntersectionObserver-canuse[8]IntersectionObserver的polyfillnpminstallintersection-observerimport'intersection-observer';总结以上就是本次要介绍的全部内容了，总的来说，IntersectionObserver使用方便快捷有效，所以赶紧用起来吧～参考资料Intersection_Observer_API[9]作者简介高艳：猫奴一枚参考资料[1]Element.getBoundingClientRect():https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect[2]Element.getBoundingClientRect():https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect[3]viewport:https://developer.mozilla.org/zh-CN/docs/Glossary/Viewport[4]viewport:https://developer.mozilla.org/zh-CN/docs/Glossary/Viewport[5]margin:https://developer.mozilla.org/zh-CN/docs/Web/CSS/margin[6]root:https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver/root[7]margin:https://developer.mozilla.org/zh-CN/docs/Web/CSS/margin[8]IntersectionObserver-canuse:https://caniuse.com/?search=IntersectionObserver[9]Intersection_Observer_API:https://developer.mozilla.org/zh-CN/docs/Web/API/Intersection_Observer_APILBG开源项目推广：还在手写HTML和CSS吗？还在写布局吗？快用Picasso（毕加索）吧！一键生成高可用的前端代码，让你有更多的时间去沉淀和成长开源项目地址：https://github.com/wuba/Picasso（欢迎Star）官网地址：https://picassoui.58.com58同城北京总部