Intersection Observer API：實時監(jiān)控元素是否可見

你可能不知道，JavaScript 近年來悄然積累了許多觀察者，而 Intersection Observer 正是其中一種強大的工具。觀察者是實時監(jiān)控特定事件的對象，就像觀鳥者坐在他們最喜歡的地方等待鳥兒出現(xiàn)一樣。不同的觀察者觀察不同的目標。

我最早接觸到的觀察者是 Mutation Observer，它用于檢測 DOM 樹的更改。當時它是獨一無二的，但現(xiàn)在我們有了更多觀察者。

Intersection Observer 觀察元素與其祖先元素或頁面可見區(qū)域（即視口）之間的“交叉”（即元素進入或離開視口）。這有點像觀看火車經(jīng)過車站。你可以看到火車何時進站、何時離站以及它停站了多久。

了解元素何時即將進入視野、何時消失或自進入視野以來已過去多長時間，都具有非常實用的應用。因此，我們將了解一些用例——在通過 Intersection Observer API 創(chuàng)建 IntersectionObserver 對象的代碼之后。

IntersectionObserver 快速概述

在撰寫本文時，Intersection Observer API 已經(jīng)獲得了廣泛的支持。

瀏覽器支持數(shù)據(jù)來自 Caniuse，其中包含更多詳細信息。數(shù)字表示瀏覽器在該版本及更高版本中支持該功能。

桌面端

移動/平板

但是，如果你想在使用 Intersection Observer 時檢查它是否受支持，你可以查看 window 對象中是否存在 IntersectionObserver 屬性：

if(!!window.IntersectionObserver){}
/* or */
if('IntersectionObserver' in window){}

好的，現(xiàn)在來看一下對象的創(chuàng)建：

var observer = new IntersectionObserver(callback, options);

IntersectionObserver 對象的構(gòu)造函數(shù)接受兩個參數(shù)。第一個是回調(diào)函數(shù)，當觀察者注意到交叉并異步傳遞有關該交叉的一些數(shù)據(jù)時，該函數(shù)將被執(zhí)行。

第二個（可選）參數(shù)是options，一個包含信息的對象，用于定義什么是“交叉”。我們可能不想知道元素何時即將進入視野，而只想在它完全可見時才知道。諸如此類的事情是通過 options 參數(shù)定義的。

Options 有三個屬性：

• root – 被觀察元素將與其交叉的祖先元素/視口。把它想象成火車將與其交叉的車站。
• rootMargin – 根元素的周長，縮小或擴大根元素的觀察區(qū)域以檢測交叉。它類似于 CSS margin 屬性。
• threshold – 值（介于 0 和 1.0 之間）的數(shù)組，每個值代表元素與根交叉或越過根的距離，在此距離下將觸發(fā)回調(diào)。

假設我們的 threshold 為 0.5。當元素進入或超過其半可見閾值時，將觸發(fā)回調(diào)。如果值為[0.3, 0.6]，則當元素進入或超過其 30% 可見閾值以及其 60% 可見閾值時，將觸發(fā)回調(diào)。

現(xiàn)在理論就講到這里。讓我們看一些演示。首先是懶加載。

用例 1：懶加載圖像

要查看加載標記，請查看此網(wǎng)頁，因為嵌入式演示不會顯示該標記。

CSS-Tricks 之前已經(jīng)徹底介紹了懶加載，通常是這樣完成的：顯示一個輕量級占位符，圖像將顯示在該占位符的位置，然后在圖像進入（或即將進入）視野時將其替換為預期的圖像。相信我，實現(xiàn)這一點一點也不懶惰——也就是說，直到我們得到一些原生代碼來使用。

我們將應用相同的機制。首先，我們有一堆圖像，并定義了一個初始顯示的占位符圖像。我們使用一個數(shù)據(jù)屬性來攜帶要顯示的原始圖像的 URL，該屬性定義了實際圖像在進入視野時要加載的圖像。

<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174520555311750.jpg" class="lazy" alt="A Few Functional Uses for Intersection Observer to Know When an Element is in View "><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174520555481250.jpg" class="lazy" alt="A Few Functional Uses for Intersection Observer to Know When an Element is in View "><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174520555431263.jpg" class="lazy" alt="A Few Functional Uses for Intersection Observer to Know When an Element is in View ">

其余的是腳本。

let observer = new IntersectionObserver(
(entries, observer) => { 
  entries.forEach(entry => {
    /* 在這里處理每個交叉*/
  });
}, 
{rootMargin: "0px 0px -200px 0px"});

上面的回調(diào)函數(shù)是一個箭頭函數(shù)（盡管你可以使用普通函數(shù)）。

回調(diào)函數(shù)接收兩個參數(shù)：一組entries，包含有關每個交叉的信息；以及observer本身?？梢赃^濾或循環(huán)遍歷這些 entries，然后處理我們想要的交叉 entries。至于 options，我只提供了 rootMargin 值，讓 root 和 threshold 屬性采用其默認值。

root 的默認值為視口，threshold 的默認值為 0——這大致可以解釋為“元素出現(xiàn)在視口的那一刻就通知我！”

然而，奇怪的是，我使用 rootMargin 將視口的觀察區(qū)域底部減少了 200 像素。我們通常不會在懶加載中這樣做。相反，我們可能會增加邊距或讓它保持默認值。但是，在這種情況下，我們通常不會減少邊距。我這樣做只是因為我想演示在觀察區(qū)域的閾值處加載的原始圖像。否則，所有操作都將在視野外發(fā)生。

當圖像與視口的觀察區(qū)域（在演示中距離底部上方 200 像素）相交時，我們將占位符圖像替換為實際圖像。

let observer = new IntersectionObserver(
(entries, observer) => { 
entries.forEach(entry => {
    /* 占位符替換 */
    entry.target.src = entry.target.dataset.src;
    observer.unobserve(entry.target);
  });
}, 
{rootMargin: "0px 0px -200px 0px"});

entry.target 是被觀察者觀察的元素。在我們的例子中，這些是圖像元素。一旦在圖像元素中替換了占位符，我們就無需再觀察它了，因此我們對其調(diào)用觀察者的 unobserve 方法。

現(xiàn)在觀察者已準備就緒，是時候使用其 observe 方法開始觀察所有圖像了：

document.querySelectorAll('img').forEach(img => { observer.observe(img) });

就是這樣！我們已經(jīng)懶加載了圖像。進入下一個演示。

用例 2：元素離開視野時自動暫停視頻

假設我們在 YouTube 上觀看視頻，并且（無論出于何種原因）我們想要向下滾動以閱讀評論。我不知道你怎么樣，但我通常不會在這樣做之前先暫停視頻，這意味著我在瀏覽時會錯過一些視頻。

如果當我們從視頻滾動離開時視頻會自動暫停，那不是很好嗎？如果視頻在重新進入視野時恢復播放，那就更好了，這樣就無需點擊播放或暫停按鈕了。

Intersection Observer 當然可以做到這一點。

這是我們在 HTML 中的視頻：

<video controls="" src="OSRO-animation.mp4"></video>

這是我們在每次交叉（即 entry）期間暫停和播放視頻的方式：

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);

在我向你展示如何在每次交叉（即 entry）期間暫停和播放視頻之前，我想提請你注意 options 的 threshold 屬性。

threshold 的值為 1。root 和 rootMargin 將采用默認值。這等同于說：“嘿，一旦元素在視口中完全可見，就通知我?！?/p>

一旦發(fā)生交叉并觸發(fā)回調(diào)，我們將根據(jù)以下邏輯暫?；虿シ乓曨l：

我沒有為視頻調(diào)用 unobserve，因此觀察者會一直觀察視頻，并在每次視頻離開視野時暫停。

用例 3：查看已查看內(nèi)容的多少

這可以根據(jù)你的內(nèi)容和你首選的衡量已查看內(nèi)容多少的方式以多種方式解釋和實現(xiàn)。

對于一個簡單的示例，我們將觀察頁面上文章列表中每篇文章的最后一段。一旦文章的最后一段完全可見，我們將認為該文章已閱讀——就像我們可能會說看到火車的最后一節(jié)車廂就等于看到了整列火車一樣。

這是一個演示，它顯示頁面上的兩篇文章，每篇文章包含多段文字。

我們簡化的 HTML 如下所示：

<div></div>

<h2>Article 1</h2>
<p></p>

<h2>Article 2</h2>
<p></p>

let n=0; /* 已查看的文章總數(shù) */
let count = document.querySelector('#count');
let observer = new IntersectionObserver((entries, observer) => { 
  entries.forEach(entry => {
    if(entry.isIntersecting){
      count.textContent= `articles fully viewed - ${  n}`; 
      observer.unobserve(entry.target);
    }
  });
}, {threshold: 1});

document.querySelectorAll('article > p:last-child').forEach(p => { observer.observe(p) });

在每次交叉（即文章的最后一段完全可見）期間，我們都會遞增一個計數(shù)器：n，它表示已閱讀的文章總數(shù)。然后，我們在文章列表上方顯示該數(shù)字。

一旦我們計算了最后一段的交叉，就不需要再觀察它了，因此我們對其調(diào)用 unobserve。

感謝您的參與！

這就是我們將一起查看的本篇文章中的示例。你可能已經(jīng)了解了如何使用它來觀察元素并根據(jù)它們與視口的交叉位置觸發(fā)事件。

也就是說，在根據(jù)通過觀察者獲得的交叉數(shù)據(jù)進行視覺更改時，需要謹慎。當然，在記錄交叉數(shù)據(jù)時，Intersection Observer 非常方便。但是，當它用于進行屏幕上的更改時，我們需要確保更改不會滯后，這是一種可能性，因為我們基本上是根據(jù)異步檢索的數(shù)據(jù)進行更改。這可能需要一些時間來加載。

正如我們所看到的，每個交叉 entry 都有一個屬性集，用于傳達有關交叉的信息。在本篇文章中，我沒有介紹所有這些屬性，因此請務必查看它們。

The image is preserved in its original format. Note that the tables are empty in the input and thus remain empty in the output. I have also made stylistic changes to improve readability and flow, while maintaining the original meaning.

以上是交叉觀察者的一些功能用途可以知道何時在元素中查看的詳細內(nèi)容。更多信息請關注PHP中文網(wǎng)其他相關文章！