網頁開發時，常常需要了解某個元素是否進入了”視口”（viewport），即使用者能不能看到它。
上圖的綠色方塊不斷滾動，頂部會提示它的可見性。
傳統的實現方法是，監聽到scroll事件後，呼叫目標元素（綠色方塊）的getBoundingClientRect()方法，得到它對應於視口左上角的座標，再判斷是否在視口之內。這種方法的缺點是，由於scroll事件密集發生，計算量很大，容易造成效能問題。
目前有一個新的 IntersectionObserver API，可以自動”觀察”元素是否可見，Chrome 51+ 已經支援。由於可見（visible）的本質是，目標元素與視口產生一個交叉區，所以這個 API 叫做”交叉觀察器”。
一、API
它的用法非常簡單。
|
1 |
var io = new IntersectionObserver(callback, option); |
上面程式碼中，IntersectionObserver是瀏覽器原生提供的建構函式，接受兩個引數：callback是可見性變化時的回撥函式，option是配置物件（該引數可選）。
建構函式的返回值是一個觀察器例項。例項的observe方法可以指定觀察哪個 DOM 節點。
|
1 2 3 4 5 6 7 8 |
// 開始觀察 io.observe(document.getElementById('example')); // 停止觀察 io.unobserve(element); // 關閉觀察器 io.disconnect(); |
上面程式碼中，observe的引數是一個 DOM 節點物件。如果要觀察多個節點，就要多次呼叫這個方法。
|
1 2 |
io.observe(elementA); io.observe(elementB); |
二、callback 引數
目標元素的可見性變化時，就會呼叫觀察器的回撥函式callback。
callback一般會觸發兩次。一次是目標元素剛剛進入視口（開始可見），另一次是完全離開視口（開始不可見）。
|
1 2 3 4 5 |
var io = new IntersectionObserver( entries => { console.log(entries); } ); |
上面程式碼中，回撥函式採用的是箭頭函式的寫法。callback函式的引數（entries）是一個陣列，每個成員都是一個IntersectionObserverEntry物件。舉例來說，如果同時有兩個被觀察的物件的可見性發生變化，entries陣列就會有兩個成員。
三、IntersectionObserverEntry 物件
IntersectionObserverEntry物件提供目標元素的資訊，一共有六個屬性。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
{ 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()方法的返回值，如果沒有根元素（即直接相對於視口滾動），則返回nullboundingClientRect：目標元素的矩形區域的資訊intersectionRect：目標元素與視口（或根元素）的交叉區域的資訊intersectionRatio：目標元素的可見比例，即intersectionRect佔boundingClientRect的比例，完全可見時為1，完全不可見時小於等於0
上圖中，灰色的水平方框代表視口，深紅色的區域代表四個被觀察的目標元素。它們各自的intersectionRatio圖中都已經註明。
我寫了一個 Demo，演示IntersectionObserverEntry物件。注意，這個 Demo 只能在 Chrome 51+ 執行。
四、例項：惰性載入（lazy load）
有時，我們希望某些靜態資源（比如圖片），只有使用者向下滾動，它們進入視口時才載入，這樣可以節省頻寬，提高網頁效能。這就叫做”惰性載入”。
有了 IntersectionObserver API，實現起來就很容易了。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
function query(selector) { return Array.from(document.querySelectorAll(selector)); } var observer = new IntersectionObserver( function(changes) { changes.forEach(function(change) { var container = change.target; var content = container.querySelector('template').content; container.appendChild(content); observer.unobserve(container); }); } ); query('.lazy-loaded').forEach(function (item) { observer.observe(item); }); |
上面程式碼中，只有目標區域可見時，才會將模板內容插入真實 DOM，從而引發靜態資源的載入。
五、例項：無限滾動
無限滾動（infinite scroll）的實現也很簡單。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
var intersectionObserver = new IntersectionObserver( function (entries) { // 如果不可見，就返回 if (entries[0].intersectionRatio <= 0) return; loadItems(10); console.log('Loaded new items'); }); // 開始觀察 intersectionObserver.observe( document.querySelector('.scrollerFooter') ); |
無限滾動時，最好在頁面底部有一個頁尾欄（又稱sentinels）。一旦頁尾欄可見，就表示使用者到達了頁面底部，從而載入新的條目放在頁尾欄前面。這樣做的好處是，不需要再一次呼叫observe()方法，現有的IntersectionObserver可以保持使用。
六、Option 物件
IntersectionObserver建構函式的第二個引數是一個配置物件。它可以設定以下屬性。
6.1 threshold 屬性
threshold屬性決定了什麼時候觸發回撥函式。它是一個陣列，每個成員都是一個門檻值，預設為[0]，即交叉比例（intersectionRatio）達到0時觸發回撥函式。
|
1 2 3 4 5 6 |
new IntersectionObserver( entries => {/* ... */}, { threshold: [0, 0.25, 0.5, 0.75, 1] } ); |
使用者可以自定義這個陣列。比如，[0, 0.25, 0.5, 0.75, 1]就表示當目標元素 0%、25%、50%、75%、100% 可見時，會觸發回撥函式。
6.2 root 屬性，rootMargin 屬性
很多時候，目標元素不僅會隨著視窗滾動，還會在容器裡面滾動（比如在iframe視窗裡滾動）。容器內滾動也會影響目標元素的可見性，參見本文開始時的那張示意圖。
IntersectionObserver API 支援容器內滾動。root屬性指定目標元素所在的容器節點（即根元素）。注意，容器元素必須是目標元素的祖先節點。
|
1 2 3 4 5 6 7 8 9 |
var opts = { root: document.querySelector('.container'), rootMargin: "500px 0px" }; var observer = new IntersectionObserver( callback, opts ); |
上面程式碼中，除了root屬性，還有rootMargin屬性。後者定義根元素的margin，用來擴充套件或縮小rootBounds這個矩形的大小，從而影響intersectionRect交叉區域的大小。它使用CSS的定義方法，比如10px 20px 30px 40px，表示 top、right、bottom 和 left 四個方向的值。
這樣設定以後，不管是視窗滾動或者容器內滾動，只要目標元素可見性變化，都會觸發觀察器。
七、注意點
IntersectionObserver API 是非同步的，不隨著目標元素的滾動同步觸發。
規格寫明，IntersectionObserver的實現，應該採用requestIdleCallback()，即只有執行緒空閒下來，才會執行觀察器。這意味著，這個觀察器的優先順序非常低，只在其他任務執行完，瀏覽器有了空閒才會執行。