IntersectionObserver 是用於檢測元素之間相互交叉重疊的 API，經常用來監聽元素的出現和消失。
MDN：https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver
雖然 MDN 中描述了基本用法，但是有很多細節不明瞭，本篇文章將仔細研究一些使用過程中的細節。
實驗使用的實例代碼大致爲如下，即觀察一個 DIV 元素和視口的重疊：
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body style="height: 200vh">
<div id="target" style="width: 50vw; height: 50vw; background-color: black"> </div>
<script>
let div = document.querySelector('#target')
let intersectionObserver = new IntersectionObserver(entries => {
let entry = entries[0]
console.table([
['intersectionRatio', entry.intersectionRatio],
['isIntersecting', entry.isIntersecting]
])
})
intersectionObserver.observe(div)
</script>
</body>
</html>
參數
在調用構造函數時，可以傳遞參數threshold來配置回調函數觸發的時機。
關於這個參數，MDN 是這樣描述的：
可以是單一的 number 也可以是 number 數組，target 元素和 root 元素相交程度達到該值的時候 IntersectionObserver 註冊的回調函數將會被執行。如果你只是想要探測當 target 元素的在 root 元素中的可見性超過50%的時候，你可以指定該屬性值爲0.5。如果你想要 target 元素在 root 元素的可見程度每多25%就執行一次回調，那麼你可以指定一個數組 [0, 0.25, 0.5, 0.75, 1]。默認值是0 (意味着只要有一個 target 像素出現在 root 元素中，回調函數將會被執行)。該值爲1.0含義是當 target 完全出現在 root 元素中時候 回調纔會被執行。
簡單來說，就是重疊比例剛大於或剛小於這個值時，回調函數被觸發，也可以理解爲回調函數觸發的斷點。
默認值
默認值是0。在這種情況下，只有當元素與視口從沒重疊到有重疊和從有重疊到沒重疊的變換時，纔會觸發回調。
1
如果設置爲1，那麼只有當元素與視口從部分重疊到完全重疊和從完全重疊到部分重疊的變換時，纔會觸發回調。
數組
可以傳遞一個包含多個0到1之間的數字的數組，這樣在多個斷點上，回調函數都會被觸發。
示例：
let intersectionObserver = new IntersectionObserver(callback, { threshold: [0, 1] })
回調
當目標元素和參考元素髮生重疊比例變化時，根據配置會觸發回調函數並傳遞迴調數據。
數據
我先來看下回調函數傳遞的數據中比較常用的兩個：
- intersectionRatio：重疊比例
- intersecting：布爾值。返回 true 表示變換到從非交叉到交叉，返回 false表示變換是從交叉到非交叉
需要注意的事，intersectionRatio表示回調觸發時的實際重疊比例，不是構造函數參數中的threshold值。
時機
監聽
當調用Intersection.observe時，回調函數會被立即觸發，無論當前重疊情況如何，即使元素還沒有掛載到文檔。
掛載和卸載
元素掛載到文檔時，如果已經開始監聽那麼回調函數被觸發。
滾動
文檔滾動時，包括window.scrollTo和window.scrollBy，回調函數可能觸發。
style
當元素的style變化並導致元素位置等屬性變化時，回調函數可能觸發。
主要包括：
- display
- position，left，right，top，bottom
- transform