溫馨提示：本文目前僅適用于在 Chrome 51 及以上中瀏覽。

2016.11.1 追加，F(xiàn)irefox 52 也已經(jīng)實現(xiàn)。

2016.11.29 追加，F(xiàn)irefox 的人擔(dān)心目前規(guī)范不夠穩(wěn)定，未來很難保證向后兼容，所以禁用了這個 API，需要手動打開 dom.IntersectionObserver.enabled 才行。

IntersectionObserver API 是用來監(jiān)視某個元素是否滾動進了瀏覽器窗口的可視區(qū)域（視口）或者滾動進了它的某個祖先元素的可視區(qū)域內(nèi)。它的主要功能是用來實現(xiàn)延遲加載和展現(xiàn)量統(tǒng)計。先來看一段視頻簡介：

再來看看名字，名字里第一個單詞 intersection 是交集的意思，小時候數(shù)學(xué)里面就學(xué)過：

不過在網(wǎng)頁里，元素都是矩形的：

第二個單詞 observer 是觀察者的意思，和 MutationObserver 以及已死的 Object.observe 中的 observe(r) 一個意思。

下面列出了這個 API 中所有的參數(shù)、屬性、方法：

// 用構(gòu)造函數(shù)生成觀察者實例
let observer = new IntersectionObserver((entries, observer) => {
 // 回調(diào)函數(shù)中可以拿到每次相交發(fā)生時所產(chǎn)生的交集的信息
 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)
 }
}, { // 構(gòu)造函數(shù)的選項
 root: null,
 threshold: [0, 0.5, 1],
 rootMargin: "50px, 0px"
})

// 實例屬性
observer.root
observer.rootMargin
observer.thresholds

// 實例方法
observer.observe()
observer.unobserve()
observer.disconnect()
observer.takeRecords()

然后分三小節(jié)詳細(xì)介紹它們：

構(gòu)造函數(shù)

new IntersectionObserver(callback, options)

callback 是個必選參數(shù)，當(dāng)有相交發(fā)生時，瀏覽器便會調(diào)用它，后面會詳細(xì)介紹；options 整個參數(shù)對象以及它的三個屬性都是可選的：

root

IntersectionObserver API 的適用場景主要是這樣的：一個可以滾動的元素，我們叫它根元素，它有很多后代元素，想要做的就是判斷它的某個后代元素是否滾動進了自己的可視區(qū)域范圍。這個 root 參數(shù)就是用來指定根元素的，默認(rèn)值是 null。

如果它的值是 null，根元素就不是個真正意義上的元素了，而是這個瀏覽器窗口了，可以理解成 window，但 window 也不是元素（甚至不是節(jié)點）。這時當(dāng)前窗口里的所有元素，都可以理解成是 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 的屬性來判斷它是進來還是離開了，為什么這么做？先忽略掉，下面會有一小節(jié)專門解釋。

根元素除了是 null，還可以是目標(biāo)元素任意的祖先元素：

<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，那么相交區(qū)域就不一定在視口內(nèi)了，因為 root 和 target 的相交也可能發(fā)生在視口下方，像下面這個 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>

總結(jié)一下：這一小節(jié)我們講了根元素的兩種類型，null 和任意的祖先元素，其中 null 值表示根元素為當(dāng)前窗口（的視口）。

threshold

當(dāng)目標(biāo)元素和根元素相交時，用相交的面積除以目標(biāo)元素的面積會得到一個 0 到 1（0% 到 100%）的數(shù)值：

下面這句話很重要，IntersectionObserver API 的基本工作原理就是：當(dāng)目標(biāo)元素和根元素相交的面積占目標(biāo)元素面積的百分比到達或跨過某些指定的臨界值時就會觸發(fā)回調(diào)函數(shù)。threshold 參數(shù)就是用來指定那個臨界值的，默認(rèn)值是 0，表示倆元素剛剛挨上就觸發(fā)回調(diào)。有效的臨界值可以是在 0 到 1 閉區(qū)間內(nèi)的任意數(shù)值，比如 0.5 表示當(dāng)相交面積占目標(biāo)元素面積的一半時觸發(fā)回調(diào)。而且可以指定多個臨界值，用數(shù)組形式，比如 [0, 0.5, 1]，表示在兩個矩形開始相交，相交一半，完全相交這三個時刻都要觸發(fā)一次回調(diào)函數(shù)。如果你傳了個空數(shù)組，它會給你自動插入 0，變成 [0]，也等效于默認(rèn)值 0。

<

下面的動畫演示了當(dāng) threshold 參數(shù)為 [0, 0.5, 1] 時，向下滾動頁面時回調(diào)函數(shù)是在何時觸發(fā)的：

不僅當(dāng)目標(biāo)元素從視口外移動到視口內(nèi)時會觸發(fā)回調(diào)，從視口內(nèi)移動到視口外也會：

你可以在這個 demo 里驗證上面的兩個動畫：

你可以在這個 demo 里驗證上面的兩個動畫：

<div id="info">
 慢慢向下滾動，相交次數(shù)：
 <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 數(shù)組里的數(shù)字的順序沒有強硬要求，為了可讀性，最好從小到大書寫。如果指定的某個臨界值小于 0 或者大于 1，瀏覽器會報錯：

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

rootMagin

本文一開始就說了，這個 API 的主要用途之一就是用來實現(xiàn)延遲加載，那么真正的延遲加載會等 img 標(biāo)簽或者其它類型的目標(biāo)區(qū)塊進入視口才執(zhí)行加載動作嗎？顯然，那就太遲了。我們通常都會提前幾百像素預(yù)先加載，rootMargin 就是用來干這個的。rootMargin 可以給根元素添加一個假想的 margin，從而對真實的根元素區(qū)域進行縮放。比如當(dāng) root 為 null 時設(shè)置 rootMargin: "100px"，實際的根元素矩形四條邊都會被放大 100px，像這樣：

效果可以想象到，如果 threshold 為 0，那么當(dāng)目標(biāo)元素距離視口 100px 的時候（無論哪個方向），回調(diào)函數(shù)就提前觸發(fā)了?？紤]到常見的頁面都沒有橫向滾動的需求，rootMargin 參數(shù)的值一般都是 "100px 0px"，這種形式，也就是左右 margin 一般都是 0px. 下面是一個用 IntersectionObserver 實現(xiàn)圖片在距視口 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%。

如果使用了負(fù) margin，真實的根元素區(qū)域會被縮小，對應(yīng)的延遲加載就會延后，比如用了 rootMargin: "-100px" 的話，目標(biāo)元素滾動進根元素可視區(qū)域內(nèi)部 100px 的時候才有可能觸發(fā)回調(diào)。

實例

實例屬性

root

該觀察者實例的根元素（默認(rèn)值為 null）：

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

rootMargin

rootMargin 參數(shù)（默認(rèn)值為 "0px"）經(jīng)過序列化后的值：

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 參數(shù)（默認(rèn)值為 0）經(jīng)過序列化后的值，即便你傳入的是一個數(shù)字，序列化后也是個數(shù)組，目前 Chrome 的實現(xiàn)里數(shù)字的精度會有丟失，但無礙：

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 過的數(shù)組

這三個實例屬性都是用來標(biāo)識一個觀察者實例的，都是讓人來讀的，在代碼中沒有太大用途。

實例方法

observe()

觀察某個目標(biāo)元素，一個觀察者實例可以觀察任意多個目標(biāo)元素。注意，這里可能有同學(xué)會問：能不能 delegate？能不能只調(diào)用一次 observe 方法就能觀察一個頁面里的所有 img 元素，甚至那些未產(chǎn)生的？答案是不能，這不是事件，沒有冒泡。

unobserve()

取消對某個目標(biāo)元素的觀察，延遲加載通常都是一次性的，observe 的回調(diào)里應(yīng)該直接調(diào)用 unobserve() 那個元素.

disconnect()

取消觀察所有已觀察的目標(biāo)元素

takeRecords()

理解這個方法需要講點底層的東西：在瀏覽器內(nèi)部，當(dāng)一個觀察者實例在某一時刻觀察到了若干個相交動作時，它不會立即執(zhí)行回調(diào)，它會調(diào)用 window.requestIdleCallback() （目前只有 Chrome 支持）來異步的執(zhí)行我們指定的回調(diào)函數(shù)，而且還規(guī)定了最大的延遲時間是 100 毫秒，相當(dāng)于瀏覽器會執(zhí)行：

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

你的回調(diào)可能在隨后 1 毫秒內(nèi)就執(zhí)行，也可能在第 100 毫秒才執(zhí)行，這是不確定的。在這不確定的 100 毫秒之間的某一刻，假如你迫切需要知道這個觀察者實例有沒有觀察到相交動作，你就得調(diào)用 takeRecords() 方法，它會同步返回包含若干個 IntersectionObserverEntry 對象的數(shù)組（IntersectionObserverEntry 對象包含每次相交的信息，在下節(jié)講），如果該觀察者實例此刻并沒有觀察到相交動作，那它就返回個空數(shù)組。

注意，對于同一個相交信息來說，同步的 takeRecords() 和異步的回調(diào)函數(shù)是互斥的，如果回調(diào)先執(zhí)行了，那么你手動調(diào)用 takeRecords() 就必然會拿到空數(shù)組，如果你已經(jīng)通過 takeRecords() 拿到那個相交信息了，那么你指定的回調(diào)就不會被執(zhí)行了（entries.length > 0 是 false）。

這個方法的真實使用場景很少，我舉不出來，我只能寫出一個驗證上面兩段話（時序無規(guī)律）的測試代碼：

<script>
 setInterval(() => {
 let observer = new IntersectionObserver(entries => {
 if (entries.length) {
 document.body.innerHTML += "<p>異步的 requestIdleCallback() 回調(diào)先執(zhí)行了"
 }
 })

 requestAnimationFrame(() => {
 setTimeout(() => {
 if (observer.takeRecords().length) {
  document.body.innerHTML += "<p>同步的 takeRecords() 先執(zhí)行了"
 }
 }, 0)
 })

 observer.observe(document.body)

 scrollTo(0, 1e10)
 }, 100)
</script>

回調(diào)函數(shù)

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)
 }
})

回調(diào)函數(shù)共有兩個參數(shù)，第二個參數(shù)就是觀察者實例本身，一般沒用，因為實例通常我們已經(jīng)賦值給一個變量了，而且回調(diào)函數(shù)里的 this 也是那個實例。第一個參數(shù)是個包含有若干個 IntersectionObserverEntry 對象的數(shù)組，也就是和 takeRecords() 方法的返回值一樣。每個 IntersectionObserverEntry 對象都代表一次相交，它的屬性們就包含了那次相交的各種信息。entries 數(shù)組中 IntersectionObserverEntry 對象的排列順序是按照它所屬的目標(biāo)元素當(dāng)初被 observe() 的順序排列的。

time

相交發(fā)生時距離頁面打開時的毫秒數(shù)（有小數(shù)），也就是相交發(fā)生時 performance.now() 的返回值，比如 60000.560000000005，表示是在頁面打開后大概 1 分鐘發(fā)生的相交。在回調(diào)函數(shù)里用 performance.now() 減去這個值，就能算出回調(diào)函數(shù)被 requestIdleCallback 延遲了多少毫秒：

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

 observer.observe(document.documentElement)
</script>

你可以不停刷新上面這個 demo，那個毫秒數(shù)最多 100 出頭，因為瀏覽器內(nèi)部設(shè)置的最大延遲就是 100。

target

相交發(fā)生時的目標(biāo)元素，因為一個根元素可以觀察多個目標(biāo)元素，所以這個 target 不一定是哪個元素。

rootBounds

一個對象值，表示發(fā)生相交時根元素可見區(qū)域的矩形信息，像這樣：

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

boundingClientRect

發(fā)生相交時目標(biāo)元素的矩形信息，等價于 target.getBoundingClientRect()。

intersectionRect

根元素和目標(biāo)元素相交區(qū)域的矩形信息。

intersectionRatio

0 到 1 的數(shù)值，表示相交區(qū)域占目標(biāo)元素區(qū)域的百分比，也就是 intersectionRect 的面積除以 boundingClientRect 的面積得到的值。

貼邊的情況是特例

上面已經(jīng)說過，IntersectionObserver API 的基本工作原理就是檢測相交率的變化。每個觀察者實例為所有的目標(biāo)元素都維護著一個上次相交率（previousThreshold）的字段，在執(zhí)行 observe() 的時候會給 previousThreshold 賦初始值 0，然后每次檢測到新的相交率滿足（到達或跨過）了 thresholds 中某個指定的臨界值，且那個臨界值和當(dāng)前的 previousThreshold 值不同，就會觸發(fā)回調(diào)，并把滿足的那個新的臨界值賦值給 previousThreshold，依此反復(fù)，很簡單，對吧。

但是不知道你有沒有注意到，前面講過，當(dāng)目標(biāo)元素從距離根元素很遠到和根元素貼邊，這時也會觸發(fā)回調(diào)（假如 thresholds 里有 0），但這和工作原理相矛盾啊，離的很遠相交率是 0，就算貼邊，相交率還是 0，值并沒有變，不應(yīng)該觸發(fā)回調(diào)啊。的確，這和基本工作原理矛盾，但這種情況是特例，目標(biāo)元素從根元素外部很遠的地方移動到和根元素貼邊，也會當(dāng)做是滿足了臨界值 0，即便 0 等于 0。

還有一個反過來的特例，就是目標(biāo)元素從根元素內(nèi)部的某個地方（相交率已經(jīng)是 1）移動到和根元素貼邊（還是 1），也會觸發(fā)回調(diào)（假如 thresholds 里有 1）。

目標(biāo)元素寬度或高度為 0 的情況也是特例

很多時候我們的目標(biāo)元素是個空的 img 標(biāo)簽或者是一個空的 div 容器，如果沒有設(shè)置 CSS，這些元素的寬和高都是 0px，那渲染出的矩形面積就是 0px2，那算相交率的時候就會遇到除以 0 這種在數(shù)學(xué)上是非法操作的問題，即便在 JavaScript 里除以 0 并不會拋異常還是會得到 Infinity，但相交率一直是 Infinity 也就意味著回調(diào)永遠不會觸發(fā)，所以這種情況必須特殊對待。

特殊對待的方式就是：0 面積的目標(biāo)元素的相交率要么是 0 要么是 1。無論是貼邊還是移動到根元素內(nèi)部，相交率都是 1，其它情況都是 0。1 到 0 會觸發(fā)回調(diào)，0 到 1也會觸發(fā)回調(diào)，就這兩種情況：

由于這個特性，所以為 0 面積的目標(biāo)元素設(shè)置臨界值是沒有意義的，設(shè)置什么值、設(shè)置幾個，都是一個效果。

但是注意，相交信息里的 intersectionRatio 屬性永遠是 0，很燒腦，我知道：

<div id="target"></div>

<script>
 let observer = new IntersectionObserver(([entry]) => {
 alert(entry.intersectionRatio)
 })

 observer.observe(target)
</script>

observe() 之前就已經(jīng)相交了的情況是特例嗎？

不知道你們有沒有這個疑問，反正我有過。observe() 一個已經(jīng)和根元素相交的目標(biāo)元素之后，再也不滾動頁面，意味著之后相交率再也不會變化，回調(diào)不應(yīng)該發(fā)生，但還是發(fā)生了。這是因為：在執(zhí)行 observe() 的時候，瀏覽器會將 previousThreshold 初始化成 0，而不是初始化成當(dāng)前真正的相交率，然后在下次相交檢測的時候就檢測到相交率變化了，所以這種情況不是特殊處理。

瀏覽器何時進行相交檢測，多久檢測一次？

我們常見的顯示器都是 60hz 的，就意味著瀏覽器每秒需要繪制 60 次（60fps），大概每 16.667ms 繪制一次。如果你使用 200hz 的顯示器，那么瀏覽器每 5ms 就要繪制一次。我們把 16.667ms 和 5ms 這種每次繪制間隔的時間段，稱之為 frame（幀，和 html 里的 frame 不是一個東西）。瀏覽器的渲染工作都是以這個幀為單位的，下圖是 Chrome 中每幀里瀏覽器要干的事情（我在原圖的基礎(chǔ)上加了 Intersection Observations 階段)：

可以看到，相交檢測（Intersection Observations）發(fā)生在 Paint 之后 Composite 之前，多久檢測一次是根據(jù)顯示設(shè)備的刷新率而定的。但可以肯定的是，每次繪制不同的畫面之前，都會進行相交檢測，不會有漏網(wǎng)之魚。

一次性到達或跨過的多個臨界值中選一個最近的

如果一個觀察者實例設(shè)置了 11 個臨界值：[0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1]，那么當(dāng)目標(biāo)元素和根元素從完全不相交狀態(tài)滾動到相交率為 1 這一段時間里，回調(diào)函數(shù)會觸發(fā)幾次？答案是：不確定。要看滾動速度，如果滾動速度足夠慢，每次相交率到達下一個臨界值的時間點都發(fā)生在了不同的幀里（瀏覽器至少繪制了 11 次），那么就會有 11 次相交被檢測到，回調(diào)函數(shù)就會被執(zhí)行 11 次；如果滾動速度足夠快，從不相交到完全相交是發(fā)生在同一個幀里的，瀏覽器只繪制了一次，瀏覽器雖然知道這一次滾動操作就滿足了 11 個指定的臨界值（從不相交到 0，從 0 到 0.1，從 0.1 到 0.2 ··· ），但它只會考慮最近的那個臨界值，那就是 1，回調(diào)函數(shù)只觸發(fā)一次：

<div id="info">相交次數(shù)：
 <span id="times">0</span>
 <button onclick="document.scrollingElement.scrollTop = 10000">一下滾動到最低部</button>
</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.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1] // 11 個臨界值
 })

 observer.observe(target)
</script>

離開視口的時候也一個道理，假如根元素和目標(biāo)元素的相交率先從完全相交變成了 0.45，然后又從 0.45 變成了完全不相交，那么回調(diào)函數(shù)只會觸發(fā)兩次。

如何判斷當(dāng)前是否相交？

我上面有幾個 demo 都用了幾行看起來挺麻煩的代碼來判斷目標(biāo)元素是不是在視口內(nèi)：

if (!target.isIntersecting) {
 // 相交
 target.isIntersecting = true
} else {
 // 不想交
 target.isIntersecting = false
}

為什么？難道用 entry.intersectionRatio > 0 判斷不可以嗎：

<div id="info">不可見，請非常慢的向下滾動</div>
<div id="target"></div>

<style>
 #info {
 position: fixed;
 }

 #target {
 position: absolute;
 top: 200%;
 width: 100px;
 height: 100px;
 background: red;
 }
</style>

<script>
 let observer = new IntersectionObserver(([entry]) => {
 if (entry.intersectionRatio > 0) {
 // 快速滾動會執(zhí)行到這里
 info.textContent = "可見了"
 } else {
 // 慢速滾動會執(zhí)行到這里
 info.textContent = "不可見，請非常慢的向下滾動"
 }
 })

 observer.observe(target)
</script>

粗略一看，貌似可行，但你別忘了上面講的貼邊的情況，如果你滾動頁面速度很慢，當(dāng)目標(biāo)元素的頂部和視口底部剛好挨上時，瀏覽器檢測到相交了，回調(diào)函數(shù)觸發(fā)了，但這時 entry.intersectionRatio 等于 0，會進入 else 分支，繼續(xù)向下滾，回調(diào)函數(shù)再不會觸發(fā)了，提示文字一直停留在不可見狀態(tài)；但如果你滾動速度很快，當(dāng)瀏覽器檢測到相交時，已經(jīng)越過了 0 那個臨界值，存在了實際的相交面積，entry.intersectionRatio > 0 也就為 true 了。所以這樣寫會導(dǎo)致代碼執(zhí)行不穩(wěn)定，不可行。

除了通過在元素身上添加新屬性來記錄上次回調(diào)觸發(fā)時是進還是出外，我還想到另外一個辦法，那就是給 threshold 選項設(shè)置一個很小的接近 0 的臨界值，比如 0.000001，然后再用 entry.intersectionRatio > 0 判斷，這樣就不會受貼邊的情況影響了，也就不會受滾動速度影響了：

<div id="info">不可見，以任意速度向下滾動</div>
<div id="target"></div>

<style>
 #info {
 position: fixed;
 }

 #target {
 position: absolute;
 top: 200%;
 width: 100px;
 height: 100px;
 background: red;
 }
</style>

<script>
 let observer = new IntersectionObserver(([entry]) => {
 if (entry.intersectionRatio > 0) {
 info.textContent = "可見了"
 } else {
 info.textContent = "不可見，以任意速度向下滾動"
 }
 }, {
 threshold: [0.000001]
 })

 observer.observe(target)
</script>

目標(biāo)元素不是根元素的后代元素的話會怎樣？

如果在執(zhí)行 observe() 時，目標(biāo)元素不是根元素的后代元素，瀏覽器也并不會報錯，Chrome 從 53 開始會對這種用法發(fā)出警告（是我提議的），從而提醒開發(fā)者這種用法有可能是不對的。為什么不更嚴(yán)格點，直接報錯？因為元素的層級關(guān)系是可以變化的，可能有人會寫出這樣的代碼：

<div id="root"></div>
<div id="target"></div>

<style>
 #target {
 width: 100px;
 height: 100px;
 background: red;
 }
</style>

<script>
 let observer = new IntersectionObserver(() => alert("看見我了"), {root: root})
 observer.observe(target) // target 此時并不是 root 的后代元素，Chrome 控制臺會發(fā)出警告：target element is not a descendant of root.
 root.appendChild(target) // 現(xiàn)在是了，觸發(fā)回調(diào)
</script>

又或者被 observe 的元素此時還未添加到 DOM 樹里：

<div id="root"></div>

<style>
 #target {
 width: 100px;
 height: 100px;
 background: red;
 }
</style>

<script>
 let observer = new IntersectionObserver(() => alert("看見我了"), {root: root})
 let target = document.createElement("div") // 還不在 DOM 樹里
 observer.observe(target) // target 此時并不是 root 的后代元素，Chrome 控制臺會發(fā)出警告：target element is not a descendant of root.
 root.appendChild(target) // 現(xiàn)在是了，觸發(fā)回調(diào)
</script>

也就是說，只要在相交發(fā)生時，目標(biāo)元素是根元素的后代元素，就可以了，執(zhí)行 observe() 的時候可以不是。

是后代元素還不夠，根元素必須是目標(biāo)元素的祖先包含塊

要求目標(biāo)元素是根元素的后代元素只是從 DOM 結(jié)構(gòu)上說的，一個較容易理解的限制，另外一個不那么容易理解的限制是從 CSS 上面說的，那就是：根元素矩形必須是目標(biāo)元素矩形的祖先包含塊（包含塊也是鏈?zhǔn)降?，就像原型鏈）。比如下面這個 demo 所演示的，兩個做隨機移動的元素 a 和 b，a 是 b 的父元素，但它倆的 position 都是 fixed，導(dǎo)致 a 不是 b 的包含塊，所以這是個無效的觀察操作，嘗試把 fixed 改成 relative 就發(fā)現(xiàn)回調(diào)觸發(fā)了：

<div id="a">
 <div id="b"></div>
</div>
<div id="info">0%</div>

<style>
 #a, #b {
 position: fixed; /* 嘗試改成 relative */
 width: 200px;
 height: 200px;
 opacity: 0.8;
 }

 #a {
 background: red
 }

 #b {
 background: blue
 }

 #info {
 width: 200px;
 margin: 0 auto;
 }

 #info::before {
 content: "Intersection Ratio: ";
 }
</style>

<script>
 let animate = (element, oldCoordinate = {x: 0, y: 0}) => {
 let newCoordinate = {
 x: Math.random() * (innerWidth - element.clientWidth),
 y: Math.random() * (innerHeight - element.clientHeight)
 }
 let keyframes = [oldCoordinate, newCoordinate].map(coordinateToLeftTop)
 let duration = calcDuration(oldCoordinate, newCoordinate)

 element.animate(keyframes, duration).onfinish = () => animate(element, newCoordinate)
 }

 let coordinateToLeftTop = coordinate => ({
 left: coordinate.x + "px",
 top: coordinate.y + "px"
 })

 let calcDuration = (oldCoordinate, newCoordinate) => {
 // 移動速度為 0.3 px/ms
 return Math.hypot(oldCoordinate.x - newCoordinate.x, oldCoordinate.y - newCoordinate.y) / 0.3
 }

 animate(a)
 animate(b)
</script>


<script>
 let thresholds = Array.from({
 length: 200
 }, (k, v) => v / 200) // 200 個臨界值對應(yīng) 200px

 new IntersectionObserver(([entry]) => {
 info.textContent = (entry.intersectionRatio * 100).toFixed(2) + "%"
 }, {
 root: a,
 threshold: thresholds
 }).observe(b)
</script>

從 DOM 樹中刪除目標(biāo)元素會怎么樣？

假設(shè)現(xiàn)在根元素和目標(biāo)元素已經(jīng)是相交狀態(tài)，這時假如把目標(biāo)元素甚至是根元素從 DOM 樹中刪除，或者通過 DOM 操作讓目標(biāo)元素不在是根元素的后代元素，再或者通過改變 CSS 屬性導(dǎo)致根元素不再是目標(biāo)元素的包含塊，又或者通過 display:none 隱藏某個元素，這些操作都會讓兩者的相交率突然變成 0，回調(diào)函數(shù)就有可能被觸發(fā)：

<div id="info"> 刪除目標(biāo)元素也會觸發(fā)回調(diào)
 <button onclick="document.body.removeChild(target)">刪除 target</button>
</div>
<div id="target"></div>


<style>
 #info {
 position: fixed;
 }
 
 #target {
 position: absolute;
 top: 100px;
 width: 100px;
 height: 100px;
 background: red;
 }
</style>

<script>
 let observer = new IntersectionObserver(() => {
 if (!document.getElementById("target")) {
 info.textContent = "target 被刪除了"
 }
 })

 observer.observe(target)
</script>

關(guān)于 iframe

在 IntersectionObserver API 之前，你無法在一個跨域的 iframe 頁面里判斷這個 iframe 頁面或者頁面里的某個元素是否出現(xiàn)在了頂層窗口的視口里，這也是為什么要發(fā)明 IntersectionObserver API 的一個很重要的原因。請看下圖演示：

無論怎么動，無論多少層 iframe， IntersectionObserver 都能精確的判斷出目標(biāo)元素是否出現(xiàn)在了頂層窗口的視口里，無論跨域不跨域。

前面講過根元素為 null 表示實際的根元素是當(dāng)前窗口的視口，現(xiàn)在更明確點，應(yīng)該是最頂層窗口的視口。

如果當(dāng)前頁面是個 iframe 頁面，且和頂層頁面跨域，在根元素為 null 的前提下觸發(fā)回調(diào)后，你拿到的 IntersectionObserverEntry 對象的 rootBounds 屬性會是 null；即便兩個頁面沒有跨域，那么 rootBounds 屬性所拿到的矩形的坐標(biāo)系統(tǒng)和 boundingClientRect 以及 intersectionRect 這兩個矩形也是不一樣的，前者坐標(biāo)系統(tǒng)的原點是頂層窗口的左上角，后兩者是當(dāng)前 iframe 窗口左上角。

鑒于互聯(lián)網(wǎng)上的廣告 90% 都是跨域的 iframe，我想 IntersectionObserver API 能夠大大簡化這些廣告的延遲加載和真實曝光量統(tǒng)計的實現(xiàn)。

根元素不能是其它 frame 下的元素

如果沒有跨域的話，根元素可以是上層 frame 中的某個祖先元素嗎？比如像下面這樣：

<div id="root">
 <iframe id="iframe"></iframe>
</div>

<script>
 let iframeHTML = `
 <div id="target"></div>

 <style>
 #target {
 width: 100px;
 height: 100px;
 background: red;
 }
 </style>

 <script>
 let observer = new IntersectionObserver(() => {
 alert("intersecting")
 }, {
 root: top.root
 })

 observer.observe(target)
 <\/script>`

 iframe.src = URL.createObjectURL(new Blob([iframeHTML], {"type": "text/html"}))
</script>

我不清楚上面這個 demo 中 root 算不算 target 的祖先包含塊，但規(guī)范明確規(guī)定了這種觀察操作無效，根元素不能是來自別的 frame?？偨Y(jié)一下就是：根元素要么是 null，要么是同 frame 里的某個祖先包含塊元素。

真的只是判斷兩個元素相交嗎？

實際情況永遠沒表面看起來那么簡單，瀏覽器真的只是判斷兩個矩形相交嗎？看下面的代碼：

<div id="parent">
 <div id="target"></div>
</div>

<style>
 #parent {
 width: 20px;
 height: 20px;
 background: red;
 overflow: hidden;
 }

 #target {
 width: 100px;
 height: 100px;
 background: blue;
 }
</style>

<script>
 let observer = new IntersectionObserver(([entry]) => {
 alert(`相交矩形為: ${entry.intersectionRect.width} x ${entry.intersectionRect.width}`)
 })

 observer.observe(target)
</script>

這個 demo 里根元素為當(dāng)前視口，目標(biāo)元素是個 100x100 的矩形，如果真的是判斷兩個矩形的交集那么簡單，那這個相交矩形就應(yīng)該是 100 x 100，但彈出來的相交矩形是 20 x 20。因為其實在相交檢測之前，有個裁減目標(biāo)元素矩形的步驟，裁減完才去和根元素判斷相交，裁減的基本思想就是，把目標(biāo)元素被“目標(biāo)元素和根元素之間存在的那些元素”遮擋的部分裁掉，具體裁減步驟是這樣的（用 rect 代表最終的目標(biāo)元素矩形）：

1、讓 rect 為目標(biāo)元素矩形
2、讓 current 為目標(biāo)元素的父元素
3、如果 current 不是根元素，則進行下面的循環(huán)：
如果 current 的 overflow 不是 visible（是 scroll 或 hidden 或 auto) 或者 current 是個 iframe 元素（iframe 天生自帶 overflow: auto），則：
讓 rect 等于 rect 和 current 的矩形（要排除滾動條區(qū)域）的交集
讓 current 為 current 的父元素（iframe 里的 html 元素的父元素就是父頁面里的 iframe 元素）
也就是說，實際上是順著目標(biāo)元素的 DOM 樹一直向上循環(huán)求交集的過程。再看上面的 demo，目標(biāo)元素矩形一開始是 100x100，然后和它的父元素相交成了 20x20，然后 body 元素和 html 元素沒有設(shè)置 overflow，所以最終和視口做交集的是 20x20 的矩形。

關(guān)于雙指縮放

移動端設(shè)備和 OS X 系統(tǒng)上面，允許用戶使用兩根手指放大頁面中的某一部分：

如果頁面某一部分被放大了，那同時也就意味著頁面邊緣上某些區(qū)域顯示在了視口的外面：

這些情況下 IntersectionObserver API 都不會做專門處理，無論是根元素還是目標(biāo)元素，它們的矩形都是縮放前的真實尺寸（就像 getBoundingClientRect() 方法所表現(xiàn)的一樣），而且即便相交真的發(fā)生在了那些因縮放導(dǎo)致用戶眼睛看不到的區(qū)域內(nèi)，回調(diào)函數(shù)也照樣觸發(fā)。如果你用的 Mac 系統(tǒng)，你現(xiàn)在就可以測試一下上面的任意一個 demo。

關(guān)于垃圾回收

一個觀察者實例無論對根元素還是目標(biāo)元素，都是弱引用的，就像 WeakMap 對自己的 key 是弱引用一樣。如果目標(biāo)元素被垃圾回收了，關(guān)系不大，瀏覽器就不會再檢測它了；如果是根元素被垃圾回收了，那就有點問題了，根元素沒了，但觀察者實例還在，如果這時使用哪個觀察者實例會怎樣：

<div id="root"></div>
<div id="target"></div>

<script>
 let observer = new IntersectionObserver(() => {}, {root: root}) // root 元素一共有兩個引用，一個是 DOM 樹里的引用，一個是全局變量 root 的引用
 document.body.removeChild(root) // 從 DOM 樹里移除
 root = null // 全局變量置空
 setTimeout(() => {
 gc() // 手動 gc，需要在啟動 Chrome 時傳入 --js-flags='--expose-gc' 選項
 console.log(observer.root) // null，觀察者實例的根元素已經(jīng)被垃圾回收了
 observer.observe(target) // Uncaught InvalidStateError: observe() called on an IntersectionObserver with an invalid root，執(zhí)行 observer 的任意方法都會報錯。
 })
</script>

也就是說，那個觀察者實例也相當(dāng)于死了。這個報錯是從 Chrome 53 開始的（我提議的），51 和 52 上只會靜默失敗。

后臺標(biāo)簽頁

由于 Chrome 不會渲染后臺標(biāo)簽頁，所以也就不會檢測相交了，當(dāng)你切換到前后才會繼續(xù)。你可以通過 Command/Ctrl + 左鍵打開上面任意的 demo 試試。

吐槽命名

threshold 和 thresholds

構(gòu)造函數(shù)的參數(shù)里叫 threshold，實例的屬性里叫 thresholds。道理我都懂，前者既能是一個單數(shù)形式的數(shù)字，也能是一個復(fù)數(shù)形式的數(shù)組，所以用了單數(shù)形式，而后者序列化出來只能是個數(shù)組，所以就用了復(fù)數(shù)了。但是統(tǒng)一更重要吧，我覺的都用復(fù)數(shù)形式?jīng)]什么問題，一開始研究這個 API 的時候我嘗試傳了 {thresholds: [1]}，試了半天才發(fā)現(xiàn)多了個 s，坑死了。

disconnect

什么？disconnect？什么意思？connect 什么了？我只知道 observe 和 unobserve，你他么的叫 unobserveAll 會死啊。這個命名很容易讓人不明覺厲，結(jié)果是個很簡單的東西。叫這個其實是為了和 MutationObserver 以及 PerformanceObserver 統(tǒng)一。

rootBounds & boundingClientRect & intersectionRect

這三者都是返回一個矩形信息的，本是同類，但是名字沒有一點規(guī)律，讓人無法記憶。我建議叫 rootRect & targetRect & intersectionRect，一遍就記住了，真不知道寫規(guī)范的人怎么想的。

Polyfil

寫規(guī)范的人會在 Github 倉庫上維護一個 polyfill，目前還未完成。但 polyfill 顯然無法支持 iframe 內(nèi)元素的檢測，不少細(xì)節(jié)也無法模擬。

其它瀏覽器實現(xiàn)進度

Firefox：https://bugzilla.mozilla.org/show_bug.cgi?id=1243846

Safari：https://bugs.webkit.org/show_bug.cgi?id=159475

Edge：https://developer.microsoft.com/en-us/microsoft-edge/platform/status/intersectionobserver

總結(jié)

雖然目前該 API 的規(guī)范已經(jīng)有一年歷史了，但仍非常不完善，大量的細(xì)節(jié)都沒有規(guī)定；Chrome 的實現(xiàn)也有半年了，但還是有不少 bug（大多是疑似 bug，畢竟規(guī)范不完善）。因此，本文中有些細(xì)節(jié)我故意略過，比如目標(biāo)元素大于根元素，甚至根元素面積為 0，支不支持 svg 這些，因為我也不知道什么是正確的表現(xiàn)。

2016-8-2 追記：今天被同事問了個真實需求，“統(tǒng)計淘寶搜索頁面在頁面打開兩秒后展現(xiàn)面積超過 50% 的寶貝”，我立刻想到了用 IntersectionObserver：

setTimeout(() => {
 let observer = new IntersectionObserver(entries => {
 entries.forEach(entry => {
 console.log(entry.target) // 拿到了想要的寶貝元素
 })
 observer.disconnect() // 統(tǒng)計到就不在需要繼續(xù)觀察了
 }, {
 threshold: 0.5 // 只要展現(xiàn)面積達到 50% 的寶貝元素 
 })

 // 觀察所有的寶貝元素
 Array.from(document.querySelectorAll("#mainsrp-itemlist .item")).forEach(item => observer.observe(item))
}, 2000)

不需要你進行任何數(shù)學(xué)計算，真是簡單到爆，當(dāng)然，因為兼容性問題，這個代碼不能被采用。