文章笔记: IntersectionObserver API 使用教程

使用示例

// 创建一个观察器
const io = new IntersectionObserver(callback, option);
// 开始观察 1 号 DOM 节点
io.observe(element1);
// 开始观察 2 号 DOM 节点
io.observe(element2);
// 停止观察 1 号 DOM 节点
io.unobserve(element1);
// 关闭观察器
io.disconnect();

参数解析

callback: 观察元素的可见性发送变化时执行的回调函数
一般会触发两次, 一次是目标元素刚刚进入视口 (开始可见), 另一次是完全离开视口 (开始不可见).
callback 的入参是一个数组, 成员是可见性发生变化的元素的信息, 每个成员都是一个 IntersectionObserverEntry 对象.
IntersectionObserverEntry 对象提供目标元素的信息, 主要属性有:
- time: 可见性发生变化的时间, 时间戳形式, 单位毫秒
- target: 被观察的可见性发生变化的目标元素, 是一个 DOM 节点对象
- isIntersecting: 当前目标元素是否可见, 区分可见性的变化是出现还是消失
- rootBounds: 根元素的矩形区域信息, 即其 getBoundingClientRect() 方法的返回值, 如果没有根元素 (即直接相对于视口滚动), 则返回null
- boundingClientRect: 目标元素的矩形区域信息
- intersectionRect: 目标元素与视口 (或根元素) 的交叉区域信息
- intersectionRatio: 目标元素的可见比例, 即 intersectionRect 占 boundingClientRect 的比例, 完全可见时为 1, 完全不可见时小于等于 0
option: 配置对象 (可选)
可配置的属性有:
- threshold: 决定什么时候触发回调函数
  数组形式, 默认为[0], 即交叉比例 (intersectionRatio) 达到 0 时触发回调函数
- root & rootMargin
  root 指定目标元素所在的容器节点 (即根元素), 容器元素必须是目标元素的祖先节点.
  rootMargin 定义根元素的 margin, 从而扩展或缩小 rootBounds 这个矩形的大小, 取值与 CSS margin 一致.

注意点

IntersectionObserver API 是异步的, 不随着目标元素的滚动同步触发, 只有线程空闲下来, 才会执行观察器.
兼容性方面较差, IE 以及低版本电脑浏览器不支持, 手机浏览器里有许多的可用性有待测试.