认识
一、认识
IntersectionObserver接口 (从属于Intersection Observer API) 提供了一种异步观察目标元素与其祖先元素或顶级文档视窗 (viewport) 交叉状态的方法。祖先元素与视窗 (viewport) 被称为根 (root)。
当一个IntersectionObserver对象被创建时，其被配置为监听根中一段给定比例的可见区域。一旦IntersectionObserver被创建，则无法更改其配置，所以一个给定的观察者对象只能用来监听可见区域的特定变化值；然而，你可以在同一个观察者对象中配置监听多个目标元素。
二、构造函数
2.1 IntersectionObserver()
**IntersectionObserver()**构造器创建并返回一个IntersectionObserver对象。如果指定rootMargin则会检查其是否符合语法规定，检查阈值以确保全部在 0.0 到 1.0之间，并且阈值列表会按升序排列。如果阈值列表为空，则默认为一个 [0.0] 的数组。
语法
var observer = new IntersectionObserver(callback[, options]);
-
callback: 当元素可见比例超过指定阈值后，会调用一个回调函数，此回调函数接受两个参数:
-
entries: 一个
IntersectionObserverEntry对象的数组，每个被触发的阈值，都或多或少与指定阈值有偏差。-
IntersectionObserverEntry.boundingClientRect: 返回包含目标元素的边界信息的DOMRectReadOnly. 边界的计算方式与 Element.getBoundingClientRect() 相同
-
IntersectionObserverEntry.intersectionRatio: 返回intersectionRect 与 boundingClientRect 的比例值
-
IntersectionObserverEntry.intersectionRect: 返回一个 DOMRectReadOnly 用来描述根和目标元素的相交区域
-
IntersectionObserverEntry.isIntersecting: 返回一个布尔值，如果目标元素与交叉区域观察者对象 (intersection observer) 的根相交，则返回 true .如果返回 true, 则 IntersectionObserverEntry 描述了变换到交叉时的状态; 如果返回 false, 那么可以由此判断，变换是从交叉状态到非交叉状态。
-
IntersectionObserverEntry.rootBounds: 返回一个 DOMRectReadOnly 用来描述交叉区域观察者 (intersection observer) 中的根
-
IntersectionObserverEntry.target: 与根出现相交区域改变的元素 (Element)
-
IntersectionObserverEntry.time: 返回一个记录从 IntersectionObserver 的时间原点 (time origin) 到交叉被触发的时间的时间戳 (DOMHighResTimeStamp).
{
time: 3893.92,
rootBounds: ClientRect {
bottom: 920,
height: 1024,
left: 0,
right: 1024,
top: 0,
width: 920
},
boundingClientRect: ClientRect {
// ...
},
intersectionRect: ClientRect {
// ...
},
intersectionRatio: 0.54,
target: element
} -
-
observer: 被调用的
IntersectionObserver实例
-
-
options: 一个可以用来配置
observer实例的对象。如果options未指定，observer实例默认使用文档视口作为root，并且没有margin，阈值为0%（意味着即使一像素的改变都会触发回调函数）。你可以指定以下配置:-
root: 监听元素的祖先元素Element对象，其边界盒将被视作视口。目标在根的可见区域的的任何不可见部分都会被视为不可见。
-
rootMargin: 一个在计算交叉值时添加至根的边界盒 (bounding_box (en-US)) 中的一组偏移量，类型为字符串 (string) ，可以有效的缩小或扩大根的判定范围从而满足计算需要。
-
threshold: 规定了一个监听目标与边界盒交叉区域的比例值，可以是一个具体的数值或是一组 0.0 到 1.0 之间的数组。若指定值为 0.0，则意味着监听元素即使与根有 1 像素交叉，此元素也会被视为可见。若指定值为 1.0，则意味着整个元素都在可见范围内时才算可见。
-
三、实例属性
3.1 observe.root
observe.root 所监听对象的具体祖先元素 (element)。如果未传入值或值为null，则默认使用顶级文档的视窗。
3.2 observe.rootMargin
observe.rootMargin 计算交叉时添加到根 (root)边界盒bounding box (en-US)的矩形偏移量， 可以有效的缩小或扩大根的判定范围从而满足计算需要。此属性返回的值可能与调用构造函数时指定的值不同，因此可能需要更改该值，以匹配内部要求。所有的偏移量均可用像素 (pixel)(px) 或百分比 (percentage)(%) 来表达，默认值为"0px 0px 0px 0px"。
3.3 observe.thresholds
observe.thresholds 一个包含阈值的列表，按升序排列，列表中的每个阈值都是监听对象的交叉区域与边界区域的比率。当监听对象的任何阈值被越过时，都会生成一个通知 (Notification)。如果构造器未传入值，则默认值为 0。
四、实例方法
4.1 observe.disconnect()
observe.disconnect() 使 IntersectionObserver 对象停止监听工作。
4.2 observe.observe()
observe.observe() 使 IntersectionObserver 开始监听一个目标元素。
4.3 observe.takeRecords()
observe.takeRecords() 返回所有观察目标的 IntersectionObserverEntry 对象数组。
4.4 observe.unobserve()
observe.unobserve() 使 IntersectionObserver 停止监听特定目标元素。