演示
使用/定義
Intersection Observer API 允許你配置一個回調函數，當以下情況發生時會被調用
每當目標(target)元素與設備視窗或者其他指定元素髮生交集的時候執行。設備視窗或者其他元素我們稱它爲根元素或根(root)。 Observer第一次監聽目標元素的時候 通常，您需要關注文檔最接近的可滾動祖先元素的交集更改，如果元素不是可滾動元素的後代，則默認爲設備視窗。如果要觀察相對於根(root)元素的交集，請指定根(root)元素爲null。
無論您是使用視口還是其他元素作爲根，API都以相同的方式工作，只要目標元素的可見性發生變化，就會執行您提供的回調函數，以便它與所需的交叉點交叉。
目標(target)元素與根(root)元素之間的交叉度是交叉比(intersection ratio)。這是目標(target)元素相對於根(root)的交集百分比的表示，它的取值在0.0和1.0之間。
let options = {
root: document.querySelector('#scrollArea'),//指定根(root)元素，用於檢查目標的可見性。必須是目標元素的父級元素。如果未指定或者爲null，則默認爲瀏覽器視窗。
rootMargin: '0px',//類似於 CSS 中的 margin 屬性，比如 "10px 20px 30px 40px" (top, right, bottom, left)。如果有指定root參數，則rootMargin也可以使用百分比來取值。該屬性值是用作root元素和target發生交集時候的計算交集的區域範圍，使用該屬性可以控制root元素每一邊的收縮或者擴張。默認值爲0。
threshold: 1.0//比例0-1 出現多少執行回調
}
//這裏創建一個交叉觀察者
let observer = new IntersectionObserver(callback, options);
//註冊觀察目前和父級關係
let target = document.querySelector('#listItem');
observer.observe(target);
//停止觀察
observer.unobserve(target);
//註銷觀察者
observer.disconnect();
callback 參數
目標元素的可見性變化時，就會調用觀察器的回調函數callback。
callback一般會觸發兩次。一次是目標元素剛剛進入視口（開始可見），另一次是完全離開視口（開始不可見）。
var io = new IntersectionObserver( entries => { console.log(entries); } ); 上面代碼中，回調函數採用的是箭頭函數的寫法。callback函數的參數（entries）是一個數組，每個成員都是一個IntersectionObserverEntry對象。舉例來說，如果同時有兩個被觀察的對象的可見性發生變化，entries數組就會有兩個成員。 IntersectionObserverEntry 對象 IntersectionObserverEntry對象提供目標元素的信息，一共有六個屬性。
{ time: 3893.92, rootBounds: ClientRect { bottom: 920, height: 1024, left: 0, right: 1024, top: 0, width: 920 }, boundingClientRect: ClientRect { // ... }, intersectionRect: ClientRect { // ... }, intersectionRatio: 0.54, target: element } 每個屬性的含義如下。
- time：可見性發生變化的時間，是一個高精度時間戳，單位爲毫秒
- target：被觀察的目標元素，是一個 DOM 節點對象
- rootBounds：根元素的矩形區域的信息，getBoundingClientRect()方法的返回值，如果沒有根元素（即直接相對於視口滾動），則返回null
- boundingClientRect：目標元素的矩形區域的信息
- intersectionRect：目標元素與視口（或根元素）的交叉區域的信息
- intersectionRatio：目標元素的可見比例，即intersectionRect佔boundingClientRect的比例，完全可見時爲1，完全不可見時小於等於0
應用場景
- 圖片懶加載——當圖片滾動到可見時才進行加載
- 內容無限滾動——也就是用戶滾動到接近內容底部時直接加載更多，而無需用戶操作翻頁，給用戶一種網頁可以無限滾動的錯覺
- 檢測廣告的曝光情況——爲了計算廣告收益，需要知道廣告元素的曝光情況
- 在用戶看見某個區域時執行任務或播放動畫
優勢
相比於我們傳統不停的監聽scroll 或者Element.getBoundingClientRect() 性能消耗更低。因爲是在requestCallback 在線程閒時運行。而且使用更加優雅，能夠應用場景的也很豐富。
遊覽器支持良好
