[TOC] ## 概述 語法 ``` interface IntersectionObserverInit { root?: Element | Document | null; //必須是目標元素的父級元素 rootMargin?: string; threshold?: number | number[]; // 如果想可見成都每多25%執行一次,則寫 [0, 0.25, 0.5, 0.75, 1] } interface IntersectionObserver { readonly root: Element | Document | null; readonly rootMargin: string; //rootMargin: '0px 0px -200px 0px' , // 寫法類似 margin //0px 0px -200px 0px，表示容器的下邊緣向上收縮200像素， //導致頁面向下滾動時，目標元素的頂部進入可視區域200像素以后，才會觸發回調函數 readonly thresholds: ReadonlyArray<number>; disconnect(): void; observe(target: Element): void; takeRecords(): IntersectionObserverEntry[]; unobserve(target: Element): void; } declare var IntersectionObserver: { prototype: IntersectionObserver; new(callback: IntersectionObserverCallback, options?: IntersectionObserverInit): IntersectionObserver; }; ``` 回調函數的參數說明 `callback`會觸發兩次。一次是目標元素剛剛進入視口（開始可見），另一次是完全離開視口（開始不可見） ``` // 回調函數有兩個參數 interface IntersectionObserverCallback { (entries: IntersectionObserverEntry[], observer: IntersectionObserver): void; } interface IntersectionObserverEntry { readonly boundingClientRect: DOMRectReadOnly; //目標元素的矩形區域的信息 readonly intersectionRatio: number; // 目標元素的可見比例，即intersectionRect占boundingClientRect的比例，完全可見時為1，完全不可見時小于等于0 readonly intersectionRect: DOMRectReadOnly; //目標元素與視口（或容器元素）的交叉區域的信息 readonly isIntersecting: boolean; readonly rootBounds: DOMRectReadOnly | null; // 容器元素的矩形區域的信息，getBoundingClientRect()方法的返回值 readonly target: Element; //被觀察的目標元素，是一個 DOM 節點對象 readonly time: number; //可見性發生變化的時間，是一個高精度時間戳，單位為毫秒 } ``` ## 判斷是否可見 ``` new IntersectionObserver( function (entries) { // 如果不可見，就返回 if (entries[0].intersectionRatio <= 0) return; loadItems(10); console.log('Loaded new items'); } ); ``` ## 實例 ## hello world 默認在viewport 中可看性監聽 <details> <summary>main.html</summary> ``` /** * * @param {IntersectionObserverEntry[]} entry * @param {IntersectionObserver} Observer * @constructor */ let Observer=function (entry, Observer) { console.log(entry); } let intersectionObserver = new IntersectionObserver(Observer) intersectionObserver.observe(document.querySelector("img")) ``` </details> <br/> ### 惰性加載（lazy load） <details> <summary>main.html</summary> ``` // html <img src="placeholder.png" data-src="img-1.jpg"> <img src="placeholder.png" data-src="img-2.jpg"> <img src="placeholder.png" data-src="img-3.jpg"> //js function query(selector) { return Array.from(document.querySelectorAll(selector)); } var observer = new IntersectionObserver( function(entries) { entries.forEach(function(entry) { entry.target.src = entry.target.dataset.src; observer.unobserve(entry.target); }); } ); query('.lazy-loaded').forEach(function (item) { observer.observe(item); }); ``` </details> <br/> ### 無限滾動 <details> <summary>main.html</summary> ``` var intersectionObserver = new IntersectionObserver( function (entries) { // 如果不可見，就返回 if (entries[0].intersectionRatio <= 0) return; loadItems(10); console.log('Loaded new items'); } ); // 開始觀察 intersectionObserver.observe( document.querySelector('.scrollerFooter') ); ``` </details> <br/> ### 視頻自動播放 <details> <summary>main.html</summary> ``` // html <video src="foo.mp4" controls=""></video> // js let video = document.querySelector('video'); let isPaused = false; let observer = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.intersectionRatio != 1 && !video.paused) { video.pause(); isPaused = true; } else if (isPaused) { video.play(); isPaused=false; } }); }, {threshold: 1}); observer.observe(video); ``` </details> <br/>