交叉观察器

交叉观察器组件只是对IntersectionObserver的简单封装。

选项

root:用于观察的根元素,默认是浏览器的视口,也可以指定具体元素,指定元素的时候用于观察的元素必须是指定元素的子元素

rootMargin:用来扩大或者缩小视窗的的大小,使用css的定义方法,10px 10px 30px 20px表示top、right、bottom 和 left的值

threshold:决定了什么时候触发回调函数。它是一个数组,每个成员都是一个门槛值,默认为[0],即交叉比例(intersectionRatio)达到0时触发回调函数。用户可以自定义这个数组。比如,[0, 0.25, 0.5, 0.75, 1]就表示当目标元素 0%、25%、50%、75%、100% 可见时,会触发回调函数。

表达式

观察组件交叉情况时执行,首次挂载是就会被执行一次,不管交叉是发生。
表达式的上下文数据主要是IntersectionObserverEntry对象:
target:被观察的目标元素,是一个 DOM 节点对象,即当前可视区域正在变化的元素。
isIntersecting:是否在可视区域。
intersectionRatio:目标元素的可见比例,即intersectionRect占boundingClientRect的比例,完全可见时为1,完全不可见时小于等于0;boundingClientRect.top < intersectionRect.top时在上方相交,> 时在下方相交。
intersectionRect:目标元素与视口(或根元素)的交叉区域的信息。
boundingClientRect:目标元素的矩形区域的信息。
rootBounds:根元素的矩形区域信息,即为getBoundingClientRect方法返回的值。
observer:IntersectionObserver实例。

与$w.IntersectionObserver()的区别

IntersectionObserver能够同时观察多个元素,但直接使用起来比较复杂。交叉观察器组件只观察此组件实例的交叉情况,使用起来比较直观简单。

Make in ZC APP Platform