溫馨提示：本文目前僅適用于在 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，回調函數只觸發一次：