首页

Javascript

Html
Css
Node.js
Electron
移动开发
小程序
工具类
服务端
浏览器相关
前端收藏
其他
关于
公司注册

IntersectionObserver API

2019年03月12日 发布 阅读(4049) 作者:Jerman

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

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

MDN官方解释

IntersectionObserver接口(从属于Intersection Observer API)为开发者提供了一种可以异步监听目标元素与其祖先或视窗(viewport)交叉状态的手段。祖先元素与视窗(viewport)被称为根(root)。

当一个IntersectionObserver对象被创建时,其被配置为监听根中一段给定比例的可见区域。一旦IntersectionObserver被创建,则无法更改其配置,所以一个给定的观察者对象只能用来监听可见区域的特定变化值;然而,你可以在同一个观察者对象中配置监听多个目标元素。

效果如下图:

浏览器兼容

IntersectionObserver使用

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

  1. if (
  2. "IntersectionObserver" in window &&
  3. "IntersectionObserverEntry" in window &&
  4. "intersectionRatio" in window.IntersectionObserverEntry.prototype
  5. ) {
  6. var intersectionObserver = new IntersectionObserver(function(entries) {
  7. console.log(entries)
  8. });
  9. console.log(intersectionObserver);
  10. // 开始监听
  11. intersectionObserver.observe(document.querySelector(".paginator-main"));
  12. }

从控制台打印一下,看看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

版权声明:本站文章除特别声明外,均采用署名-非商业性使用-禁止演绎 4.0 国际 许可协议,如需转载,请注明出处