了解Javascript中的Intersection Observer API
只需幾行，您就可以大大改善用戶體驗。
我遇到了交叉觀察者API，同時學習了Gatsby如何預取鏈接，以提供極快的導航外觀。我推遲了幾個月的調查，但終於在上周末潛入了。
什麼是Intersection Observer API？
簡而言之，它使您能夠檢測元素的可見性，即它是否在當前視口中，以及兩個元素相對於彼此的相對可見性。
用例
- 懶惰載入圖像
- 無限成交量軸
- 當鏈接出現在屏幕上時預取鏈接（蓋茨比這樣做）
- 檢測廣告是否被查看（更多跟蹤?）
- 確定用戶是否已閱讀文章，以及在何種程度上閱讀（認為媒體視圖v / s讀取統計數據）
- 僅在屏幕上可見時才運行昂貴的渲染和動畫
技術的東西
像往常一樣，關於MDN的文檔很棒，但我在搞清楚一些事情時遇到了一些麻煩，所以我在這裡分享我的筆記。
Intersection Observer API的核心是以下兩行。 var observer = new IntersectionObserver（callback，options）;
observer.observe（目標）;
- 消防您創建一個帶有一些選項的觀察者。
- 然後你要求觀察者開始觀察目標。
- 當所需的交叉點發生時，將調用您的回調函數。
選項
這是理解的棘手部分。在完成選項中的設置之前，您應該牢牢掌握以下內容：
Intersection Observer API允許您在回調函數中觀察根元素和目標元素之間的交集（超過特定閾值）時執行某些操作。
- 將root視為外部矩形或要在其中觀察交叉點的矩形。
- target是您正在觀看的元素。
- 閾值給出了重疊發生的程度。
- rootMargin是在計算交叉範圍之前應用於根的邊距。
經驗法則
- API是非同步的，因此在交集發生時使用回調函數來執行某些操作。
- 可以使用CSS選擇器來決定根元素。
- 如果指定root：document.querySelector（'null'），則用戶的當前視口將是根元素。
- 使用閾值和rootMargin來獲取您期望的確切行為。
這幾乎是Intersection Observer API的核心概念。有關進一步閱讀，請參閱MDN的文檔。
學習輸出
在學習這個API時，我想看看我是否可以創建一些有用的東西。所以我寫了幾行並創建了Chrome擴展程序。該擴展程序使用屏幕上可見的最新部分的ID更新URL。因此，當您與朋友分享更新的URL時，他們可以直接轉到您正在閱讀的部分。對於在不到一個小時內寫的一些行很酷，是嗎？
MicroContext
共享指向contentchrome.google.com特定部分的鏈接
完整代碼
此擴展的代碼長度少於30行。如果您想通過fork https://github.com/learning-paths-io/microcontext#js-flash-container接受它或者發送拉取請求。
如果您想要發表評論，該擴展程序也會在產品搜索中列出。