IntersectionObserver API

2019年03月12日发布阅读(3759) 作者：Jerman

在之前，我们要判断一个元素是否出现在视窗内，需要使用scroll或setInterval来不断计算元素的位置，这样非常损耗性能。

Chrome在2016年的时候推出了IntersectionObserver APi,现在看看它是做什么的

MDN官方解释

IntersectionObserver接口(从属于Intersection Observer API)为开发者提供了一种可以异步监听目标元素与其祖先或视窗(viewport)交叉状态的手段。祖先元素与视窗(viewport)被称为根(root)。
当一个IntersectionObserver对象被创建时，其被配置为监听根中一段给定比例的可见区域。一旦IntersectionObserver被创建，则无法更改其配置，所以一个给定的观察者对象只能用来监听可见区域的特定变化值；然而，你可以在同一个观察者对象中配置监听多个目标元素。

效果如下图:

浏览器兼容

IntersectionObserver使用

现在不是所有浏览器者都支持IntersectionObserver，所以需要先判断是否支持

if (
  "IntersectionObserver" in window &&
  "IntersectionObserverEntry" in window &&
  "intersectionRatio" in window.IntersectionObserverEntry.prototype
) {
  var intersectionObserver = new IntersectionObserver(function(entries) {
    console.log(entries)
  });
  console.log(intersectionObserver);
  // 开始监听
  intersectionObserver.observe(document.querySelector(".paginator-main"));
}

从控制台打印一下，看看intersectionObserver包含了哪些属性和方法。entries又是什么?

intersectionObserver

root [属性]只读

所监听对象的具体祖先元素(element)。如果未传入任何值或值为null，则默认使用viewport。

rootMargin [属性]只读

计算交叉时添加到根(root)边界盒bounding box的矩形偏移量，可以有效的缩小或扩大根的判定范围从而满足计算需要。此属性返回的值可能与调用构造函数时指定的值不同，因此可能需要更改该值，以匹配内部要求。所有的偏移量均可用像素(pixel)(px)或百分比(percentage)(%)来表达, 默认值为”0px 0px 0px 0px”。

thresholds [属性]只读
一个包含阈值的list, 升序排列, list中的每个阈值都是监听对象的交叉区域与边界区域的比率。当监听对象的任何阈值被越过时，都会生成一个通知(Notification)。如果构造器未传入值, 则默认值为0.
简单的说就是元素显示在可视区域的占比，默认为0

如果我们threshold改为 [0, 0.25, 0.5, 0.75, 1]，那么每多显示1/4的区域，就会调用回调函数：

disconnect[方法]

使IntersectionObserver对象停止监听工作。

observe[方法]

使IntersectionObserver开始监听一个目标元素。

takeRecords[方法]

为所有监听目标返回一个IntersectionObserverEntry对象数组并且停止监听这些目标。

unobserve[方法]

使IntersectionObserver停止监听特定目标元素。

使用IntersectionObserver的默认选项，当元素部分进入视图窗口和完全离开视图窗口时，将同时调用回调。

entries

entries是回调函数的参数，它是一个数组

boundingClientRect，返回包含目标元素的边界信息的. 边界的计算方式与 Element.getBoundingClientRect() 相同.

intersectionRect，描述根和目标元素的相交区域。

isIntersecting，返回一个布尔值, 如果目标元素与交叉区域观察者对象(intersection observer) 的根相交，则返回 true .如果返回 true, 则 IntersectionObserverEntry 描述了变换到交叉时的状态; 如果返回 false, 那么可以由此判断,变换是从交叉状态到非交叉状态.

intersectionRatio，返回intersectionRect 与 boundingClientRect 的比例值

如果boundingClientRect具有非零区域，则这将是intersectionRect面积与boundingClientRect面积的比率。否则，如果isIntersecting为真，则为1，否则为0。

rootBounds，用来描述交叉区域观察者(intersection observer)中的根.
如果target属于相同的相关类似来源的浏览上下文单元作为交点根，这将是根相交矩形。否则，这将是null。请注意，如果目标位于与交叉点根目录不同的浏览上下文中，则它将位于与和不同的坐标系中。boundingClientRectintersectionRect

target，类型为Element，readonly
在Element与其交叉点相交根改变。

time 返回一个记录从 IntersectionObserver 的时间原点(time origin)到交叉被触发的时间的时间戳(DOMHighResTimeStamp).

参考

https://developers.google.com/web/updates/2016/04/intersectionobserver
https://w3c.github.io/IntersectionObserver/
https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserverEntry

Javascript

目录