2017-03-09

了解 IntersectionObserver API

最后更新： 2018-01-05

阅读次数：次

许可协议：知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议

以往的网页，我们没有相关的 API 来检测元素是否在视口（viewport）内，只能通过计算元素在页面中的位置以及滚动的位置来进行判断。

现在，出现了一个全新的 API（IntersectionObserver API），专门来检测元素是否在视口内，并且还可以在元素进入或离开视口时触发相关的回调函数。

注意：该 API 目前还未得到广泛使用。

new IntersectionObserver(callback, options)
- callback： 在监听元素的可见性发生变化时回调，并且这个回调函数有 2 个参数
  - entries: A list of references to IntersectionObserverEntry objects
  - observer: A reference to the IntersectionObserver that called the callback
- options： 配置对象
  - root： 指定目标元素所在的容器节点（即根元素），默认为 viewport
  - rootMargin： 定义根元素的 margin
  - threshold： 一个数组，定义了什么时候调用回调函数，默认为 [0]，每个数组成员的值都在 0-1 之间
  - eg：[0,0.1,0.5,1]，会在元素可见比例为 0、10%、50%、100% 时分别触发一次回调函数

回调函数在元素出现时和元素消失时都会调用。 > 回调函数时异步进行调用的。

实例属性 （用法同上面配置对象）
- root
- rootMargin
- thresholds
实例方法
- observe(element)： 监控指定的元素
- unobserve(element)： 不再监控指定的元素
- disconnect()： 不再监控任何元素
- takeRecords()： Returns an array of IntersectionObserverEntry objects for all observed targets and stops observing all of them
IntersectionObserverEntry 对象
- time： 可见性发生变化的时间，是一个高精度时间戳，单位为毫秒
- target： 被观察的目标元素，是一个 DOM 节点对象
- rootBounds： 根元素的矩形区域的信息，getBoundingClientRect()方法的返回值，如果没有根元素（即直接相对于视口滚动），则返回 null
- boundingClientRect： 目标元素的矩形区域的信息
- intersectionRect： 目标元素与视口（或根元素）的交叉区域的信息
- intersectionRatio： 目标元素的可见比例，即 intersectionRect 占 boundingClientRect 的比例，完全可见时为 1，完全不可见时小于等于 0