交叉观察器

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

选项

延时监听：等待多少秒后才开始监听。默认为0，即立即监听。

root：用于观察的容器（选择器），默认是浏览器的视口，也可以指定具体元素。

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

threshold：决定了什么时候触发回调函数。它是一个数组，每个成员都是一个门槛值，默认为[0]，即交叉比例(ratio)达到0时触发回调函数。用户可以自定义这个数组。比如[0, 0.5, 1]表示当边界处于目标元素两边和中线时触发回调函数。

情景关注

可以指定只关注某种情形下的交叉。

表达式

观察组件交叉情况时执行。延时为0时首次挂载就会被执行一次，不管交叉是否发生。
常有的表达式的上下文数据有：
top：交叉时是否在容器顶部
up：交叉时是否正在往上移动
exit：交叉时是否正在离开容器
ratio：即intersectionRatio，目标元素的可见比例。等于1时全部可见，等于0时全部不可见。
isIntersecting：是否正在交叉。
intersectionRect：目标元素与容器的交叉区域的信息。
boundingClientRect：目标元素的矩形区域的信息。
rootBounds：根元素的矩形区域信息，即为getBoundingClientRect方法返回的值。

与$w.IntersectionObserver()的区别

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