IntersectionObserver API 详解篇

温馨提示：本文目前仅适用于在 Chrome 51 及以上中浏览。

2016.11.1 追加，Firefox 52 也已经实现。

2016.11.29 追加，Firefox 的人担心目前规范不够稳定，未来很难保证向后兼容，所以禁用了这个 API，需要手动打开 dom.IntersectionObserver.enabled 才行。

IntersectionObserver API 是用来监视某个元素是否滚动进了浏览器窗口的可视区域（视口）或者滚动进了它的某个祖先元素的可视区域内。它的主要功能是用来实现延迟加载和展现量统计。先来看一段视频简介：

再来看看名字，名字里第一个单词 intersection 是交集的意思，小时候数学里面就学过：

不过在网页里，元素都是矩形的：

第二个单词 observer 是观察者的意思，和 MutationObserver 以及已死的 Object.observe 中的 observe(r) 一个意思。

下面列出了这个 API 中所有的参数、属性、方法：

// 用构造函数生成观察者实例let observer = new IntersectionObserver((entries, observer) => { // 回调函数中可以拿到每次相交发生时所产生的交集的信息 for (let entry of entries) { console.log(entry.time) console.log(entry.target) console.log(entry.rootBounds) console.log(entry.boundingClientRect console.log(entry.intersectionRect) console.log(entry.intersectionRatio) }}, { // 构造函数的选项 root: null, threshold: [0, 0.5, 1], rootMargin: "50px, 0px"})// 实例属性observer.rootobserver.rootMarginobserver.thresholds// 实例方法observer.observe()observer.unobserve()observer.disconnect()observer.takeRecords()

然后分三小节详细介绍它们：

构造函数

new IntersectionObserver(callback, options)

callback 是个必选参数，当有相交发生时，浏览器便会调用它，后面会详细介绍；options 整个参数对象以及它的三个属性都是可选的：

root

IntersectionObserver API 的适用场景主要是这样的：一个可以滚动的元素，我们叫它根元素，它有很多后代元素，想要做的就是判断它的某个后代元素是否滚动进了自己的可视区域范围。这个 root 参数就是用来指定根元素的，默认值是 null。

如果它的值是 null，根元素就不是个真正意义上的元素了，而是这个浏览器窗口了，可以理解成 window，但 window 也不是元素（甚至不是节点）。这时当前窗口里的所有元素，都可以理解成是 null 根元素的后代元素，都是可以被观察的。

下面这个 demo 演示了根元素为 null 的用法：

<div id="info">我藏在页面底部，请向下滚动</div><div id="target"></div><style> #info { position: fixed; } #target { position: absolute; top: calc(100vh + 500px); width: 100px; height: 100px; background: red; }</style><script> let observer = new IntersectionObserver(() => { if (!target.isIntersecting) { info.textContent = "我出来了" target.isIntersecting = true } else { info.textContent = "我藏在页面底部，请向下滚动" target.isIntersecting = false } }, { root: null // null 的时候可以省略 }) observer.observe(target)</script>

需要注意的是，这里我通过在 target 上添加了个叫 isIntersecting 的属性来判断它是进来还是离开了，为什么这么做？先忽略掉，下面会有一小节专门解释。

根元素除了是 null，还可以是目标元素任意的祖先元素：

<div id="root"> <div id="info">向下滚动就能看到我</div> <div id="target"></div></div><style> #root { position: relative; width: 200px; height: 100vh; margin: 0 auto; overflow: scroll; border: 1px solid #ccc; }  #info { position: fixed; }  #target { position: absolute; top: calc(100vh + 500px); width: 100px; height: 100px; background: red; }</style><script> let observer = new IntersectionObserver(() => { if (!target.isIntersecting) { info.textContent = "我出来了" target.isIntersecting = true } else { info.textContent = "向下滚动就能看到我" target.isIntersecting = false } }, { root: root }) observer.observe(target)</script>

需要注意的一点是，如果 root 不是 null，那么相交区域就不一定在视口内了，因为 root 和 target 的相交也可能发生在视口下方，像下面这个 demo 所演示的：

<div id="root"> <div id="info">慢慢向下滚动</div> <div id="target"></div></div><style> #root { position: relative; width: 200px; height: calc(100vh + 500px); margin: 0 auto; overflow: scroll; border: 1px solid #ccc; }  #info { position: fixed; }  #target { position: absolute; top: calc(100vh + 1000px); width: 100px; height: 100px; background: red; }</style><script> let observer = new IntersectionObserver(() => { if (!target.isIntersecting) { info.textContent = "我和 root 相交了，但你还是看不见" target.isIntersecting = true } else { info.textContent = "慢慢向下滚动" target.isIntersecting = false } }, { root: root }) observer.observe(target)</script>

总结一下：这一小节我们讲了根元素的两种类型，null 和任意的祖先元素，其中 null 值表示根元素为当前窗口（的视口）。

threshold

当目标元素和根元素相交时，用相交的面积除以目标元素的面积会得到一个 0 到 1（0% 到 100%）的数值：

下面这句话很重要，IntersectionObserver API 的基本工作原理就是：当目标元素和根元素相交的面积占目标元素面积的百分比到达或跨过某些指定的临界值时就会触发回调函数。threshold 参数就是用来指定那个临界值的，默认值是 0，表示俩元素刚刚挨上就触发回调。有效的临界值可以是在 0 到 1 闭区间内的任意数值，比如 0.5 表示当相交面积占目标元素面积的一半时触发回调。而且可以指定多个临界值，用数组形式，比如 [0, 0.5, 1]，表示在两个矩形开始相交，相交一半，完全相交这三个时刻都要触发一次回调函数。如果你传了个空数组，它会给你自动插入 0，变成 [0]，也等效于默认值 0。

<

下面的动画演示了当 threshold 参数为 [0, 0.5, 1] 时，向下滚动页面时回调函数是在何时触发的：

不仅当目标元素从视口外移动到视口内时会触发回调，从视口内移动到视口外也会：

你可以在这个 demo 里验证上面的两个动画：

你可以在这个 demo 里验证上面的两个动画：

<div id="info"> 慢慢向下滚动，相交次数： <span id="times">0</span></div><div id="target"></div><style> #info { position: fixed; }  #target { position: absolute; top: 200%; width: 100px; height: 100px; background: red; margin-bottom: 100px; }</style><script> let observer = new IntersectionObserver(() => { times.textContent = +times.textContent + 1 }, { threshold: [0, 0.5, 1] }) observer.observe(target)</script>

threshold 数组里的数字的顺序没有强硬要求，为了可读性，最好从小到大书写。如果指定的某个临界值小于 0 或者大于 1，浏览器会报错：

<script>new IntersectionObserver(() => {}, { threshold: 2 // SyntaxError: Failed to construct 'Intersection': Threshold values must be between 0 and 1.})</script> 

rootMagin

本文一开始就说了，这个 API 的主要用途之一就是用来实现延迟加载，那么真正的延迟加载会等 img 标签或者其它类型的目标区块进入视口才执行加载动作吗？显然，那就太迟了。我们通常都会提前几百像素预先加载，rootMargin 就是用来干这个的。rootMargin 可以给根元素添加一个假想的 margin，从而对真实的根元素区域进行缩放。比如当 root 为 null 时设置 rootMargin: "100px"，实际的根元素矩形四条边都会被放大 100px，像这样：

效果可以想象到，如果 threshold 为 0，那么当目标元素距离视口 100px 的时候（无论哪个方向），回调函数就提前触发了。考虑到常见的页面都没有横向滚动的需求，rootMargin 参数的值一般都是 "100px 0px"，这种形式，也就是左右 margin 一般都是 0px. 下面是一个用 IntersectionObserver 实现图片在距视口 500px 的时候延迟加载的 demo：

<div id="info">图片在页面底部，仍未加载，请向下滚动</div><img id="img" src="data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoBAAEAAwA0JaQAA3AA/vuUAAA="  data-src="https://img.alicdn.com/bao/uploaded/i7/TB1BUK4MpXXXXa1XpXXYXGcGpXX_M2.SS2"><style> #info { position: fixed; } #img { position: absolute; top: 300%; }</style><script> let observer = new IntersectionObserver(() => { observer.unobserve(img) info.textContent = "开始加载图片！" img.src = img.dataset.src }, { rootMargin: "500px 0px" }) observer.observe(img)</script>

注意 rootMargin 的值虽然和 CSS 里 margin 的值的格式一样，但存在一些限制，rootMargin 只能用 px 和百分比两种单位，用其它的单位会报错，比如用 em：

<script>new IntersectionObserver(() => {}, { rootMargin: "10em" // SyntaxError: Failed to construct 'Intersection': rootMargin must be specified in pixels or percent.})</script>

rootMargin 用百分比的话就是相对根元素的真实尺寸的百分比了，比如 rootMargin: "0px 0px 50% 0px"，表示根元素的尺寸向下扩大了 50%。

如果使用了负 margin，真实的根元素区域会被缩小，对应的延迟加载就会延后，比如用了 rootMargin: "-100px" 的话，目标元素滚动进根元素可视区域内部 100px 的时候才有可能触发回调。

实例

实例属性

root

该观察者实例的根元素（默认值为 null）：

new IntersectionObserver(() => {}).root // nullnew IntersectionObserver(() => {}, {root: document.body}).root // document.body

rootMargin

rootMargin 参数（默认值为 "0px"）经过序列化后的值：

new IntersectionObserver(() => {}).rootMargin // "0px 0px 0px 0px"new IntersectionObserver(() => {}, {rootMargin: "50px"}).rootMargin // "50px 50px 50px 50px"new IntersectionObserver(() => {}, {rootMargin: "50% 0px"}).rootMargin // "50% 0px 50% 0px"new IntersectionObserver(() => {}, {rootMargin: "50% 0px 50px"}).rootMargin // 50% 0px 50px 0px" new IntersectionObserver(() => {}, {rootMargin: "1px 2px 3px 4px"}).rootMargin // "1px 2px 3px 4px"

thresholds

threshold 参数（默认值为 0）经过序列化后的值，即便你传入的是一个数字，序列化后也是个数组，目前 Chrome 的实现里数字的精度会有丢失，但无碍：

new IntersectionObserver(() => {}).thresholds // [0]new IntersectionObserver(() => {}, {threshold: 1}).thresholds // [1]new IntersectionObserver(() => {}, {threshold: [0.3, 0.6]}).thresholds // [[0.30000001192092896, 0.6000000238418579]]Object.isFrozen(new IntersectionObserver(() => {}).thresholds) // true, 是个被 freeze 过的数组

这三个实例属性都是用来标识一个观察者实例的，都是让人来读的，在代码中没有太大用途。

实例方法

observe()

观察某个目标元素，一个观察者实例可以观察任意多个目标元素。注意，这里可能有同学会问：能不能 delegate？能不能只调用一次 observe 方法就能观察一个页面里的所有 img 元素，甚至那些未产生的？答案是不能，这不是事件，没有冒泡。

unobserve()

取消对某个目标元素的观察，延迟加载通常都是一次性的，observe 的回调里应该直接调用 unobserve() 那个元素.

disconnect()

取消观察所有已观察的目标元素

takeRecords()

理解这个方法需要讲点底层的东西：在浏览器内部，当一个观察者实例在某一时刻观察到了若干个相交动作时，它不会立即执行回调，它会调用 window.requestIdleCallback() （目前只有 Chrome 支持）来异步的执行我们指定的回调函数，而且还规定了最大的延迟时间是 100 毫秒，相当于浏览器会执行：

requestIdleCallback(() => { if (entries.length > 0) { callback(entries, observer) }}, { timeout: 100})

你的回调可能在随后 1 毫秒内就执行，也可能在第 100 毫秒才执行，这是不确定的。在这不确定的 100 毫秒之间的某一刻，假如你迫切需要知道这个观察者实例有没有观察到相交动作，你就得调用 takeRecords() 方法，它会同步返回包含若干个 IntersectionObserverEntry 对象的数组（IntersectionObserverEntry 对象包含每次相交的信息，在下节讲），如果该观察者实例此刻并没有观察到相交动作，那它就返回个空数组。

注意，对于同一个相交信息来说，同步的 takeRecords() 和异步的回调函数是互斥的，如果回调先执行了，那么你手动调用 takeRecords() 就必然会拿到空数组，如果你已经通过 takeRecords() 拿到那个相交信息了，那么你指定的回调就不会被执行了（entries.length > 0 是 false）。

这个方法的真实使用场景很少，我举不出来，我只能写出一个验证上面两段话（时序无规律）的测试代码：

<script> setInterval(() => { let observer = new IntersectionObserver(entries => { if (entries.length) { document.body.innerHTML += "<p>异步的 requestIdleCallback() 回调先执行了" } }) requestAnimationFrame(() => { setTimeout(() => { if (observer.takeRecords().length) {  document.body.innerHTML += "<p>同步的 takeRecords() 先执行了" } }, 0) }) observer.observe(document.body) scrollTo(0, 1e10) }, 100)</script>

回调函数

new IntersectionObserver(function(entries, observer) { for (let entry of entries) { console.log(entry.time) console.log(entry.target) console.log(entry.rootBounds) console.log(entry.boundingClientRect console.log(entry.intersectionRect) console.log(entry.intersectionRatio) }})

回调函数共有两个参数，第二个参数就是观察者实例本身，一般没用，因为实例通常我们已经赋值给一个变量了，而且回调函数里的 this 也是那个实例。第一个参数是个包含有若干个 IntersectionObserverEntry 对象的数组，也就是和 takeRecords() 方法的返回值一样。每个 IntersectionObserverEntry 对象都代表一次相交，它的属性们就包含了那次相交的各种信息。entries 数组中 IntersectionObserverEntry 对象的排列顺序是按照它所属的目标元素当初被 observe() 的顺序排列的。

time

相交发生时距离页面打开时的毫秒数（有小数），也就是相交发生时 performance.now() 的返回值，比如 60000.560000000005，表示是在页面打开后大概 1 分钟发生的相交。在回调函数里用 performance.now() 减去这个值，就能算出回调函数被 requestIdleCallback 延迟了多少毫秒：

<script> let observer = new IntersectionObserver(([entry]) => { document.body.textContent += `相交发生在 ${performance.now() - entry.time} 毫秒前` }) observer.observe(document.documentElement)</script>

你可以不停刷新上面这个 demo，那个毫秒数最多 100 出头，因为浏览器内部设置的最大延迟就是 100。

target

相交发生时的目标元素，因为一个根元素可以观察多个目标元素，所以这个 target 不一定是哪个元素。

rootBounds

一个对象值，表示发生相交时根元素可见区域的矩形信息，像这样：

{ "top": 0, "bottom": 600, "left": 0, "right": 1280, "width": 1280, "height": 600}

boundingClientRect

发生相交时目标元素的矩形信息，等价于 target.getBoundingClientRect()。

intersectionRect

根元素和目标元素相交区域的矩形信息。

intersectionRatio

0 到 1 的数值，表示相交区域占目标元素区域的百分比，也就是 intersectionRect 的面积除以 boundingClientRect 的面积得到的值。

贴边的情况是特例

上面已经说过，IntersectionObserver API 的基本工作原理就是检测相交率的变化。每个观察者实例为所有的目标元素都维护着一个上次相交率（previousThreshold）的字段，在执行 observe() 的时候会给 previousThreshold 赋初始值 0，然后每次检测到新的相交率满足（到达或跨过）了 thresholds 中某个指定的临界值，且那个临界值和当前的 previousThreshold 值不同，就会触发回调，并把满足的那个新的临界值赋值给 previousThreshold，依此反复，很简单，对吧。

但是不知道你有没有注意到，前面讲过，当目标元素从距离根元素很远到和根元素贴边，这时也会触发回调（假如 thresholds 里有 0），但这和工作原理相矛盾啊，离的很远相交率是 0，就算贴边，相交率还是 0，值并没有变，不应该触发回调啊。的确，这和基本工作原理矛盾，但这种情况是特例，目标元素从根元素外部很远的地方移动到和根元素贴边，也会当做是满足了临界值 0，即便 0 等于 0。

还有一个反过来的特例，就是目标元素从根元素内部的某个地方（相交率已经是 1）移动到和根元素贴边（还是 1），也会触发回调（假如 thresholds 里有 1）。

目标元素宽度或高度为 0 的情况也是特例

很多时候我们的目标元素是个空的 img 标签或者是一个空的 div 容器，如果没有设置 CSS，这些元素的宽和高都是 0px，那渲染出的矩形面积就是 0px2，那算相交率的时候就会遇到除以 0 这种在数学上是非法操作的问题，即便在 JavaScript 里除以 0 并不会抛异常还是会得到 Infinity，但相交率一直是 Infinity 也就意味着回调永远不会触发，所以这种情况必须特殊对待。

特殊对待的方式就是：0 面积的目标元素的相交率要么是 0 要么是 1。无论是贴边还是移动到根元素内部，相交率都是 1，其它情况都是 0。1 到 0 会触发回调，0 到 1也会触发回调，就这两种情况：

由于这个特性，所以为 0 面积的目标元素设置临界值是没有意义的，设置什么值、设置几个，都是一个效果。

但是注意，相交信息里的 intersectionRatio 属性永远是 0，很烧脑，我知道：

<div id="target"></div><script> let observer = new IntersectionObserver(([entry]) => { alert(entry.intersectionRatio) }) observer.observe(target)</script>

observe() 之前就已经相交了的情况是特例吗？

不知道你们有没有这个疑问，反正我有过。observe() 一个已经和根元素相交的目标元素之后，再也不滚动页面，意味着之后相交率再也不会变化，回调不应该发生，但还是发生了。这是因为：在执行 observe() 的时候，浏览器会将 previousThreshold 初始化成 0，而不是初始化成当前真正的相交率，然后在下次相交检测的时候就检测到相交率变化了，所以这种情况不是特殊处理。

浏览器何时进行相交检测，多久检测一次？

我们常见的显示器都是 60hz 的，就意味着浏览器每秒需要绘制 60 次（60fps），大概每 16.667ms 绘制一次。如果你使用 200hz 的显示器，那么浏览器每 5ms 就要绘制一次。我们把 16.667ms 和 5ms 这种每次绘制间隔的时间段，称之为 frame（帧，和 html 里的 frame 不是一个东西）。浏览器的渲染工作都是以这个帧为单位的，下图是 Chrome 中每帧里浏览器要干的事情（我在原图的基础上加了 Intersection Observations 阶段)：

可以看到，相交检测（Intersection%20Observations）发生在%20Paint%20之后%20Composite%20之前，多久检测一次是根据显示设备的刷新率而定的。但可以肯定的是，每次绘制不同的画面之前，都会进行相交检测，不会有漏网之鱼。

一次性到达或跨过的多个临界值中选一个最近的

如果一个观察者实例设置了%2011%20个临界值：[0,%200.1,%200.2,%200.3,%200.4,%200.5,%200.6,%200.7,%200.8,%200.9,%201]，那么当目标元素和根元素从完全不相交状态滚动到相交率为%201%20这一段时间里，回调函数会触发几次？答案是：不确定。要看滚动速度，如果滚动速度足够慢，每次相交率到达下一个临界值的时间点都发生在了不同的帧里（浏览器至少绘制了%2011%20次），那么就会有%2011%20次相交被检测到，回调函数就会被执行%2011%20次；如果滚动速度足够快，从不相交到完全相交是发生在同一个帧里的，浏览器只绘制了一次，浏览器虽然知道这一次滚动操作就满足了%2011%20个指定的临界值（从不相交到%200，从%200%20到%200.1，从%200.1%20到%200.2%20・・・%20），但它只会考虑最近的那个临界值，那就是%201，回调函数只触发一次：