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

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

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

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

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

IntersectionObserver 快速概述

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

瀏覽器支持?jǐn)?shù)據(jù)來自Caniuse，其中包含更多詳細(xì)信息。數(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ù)，當(dāng)觀察者註意到交叉並異步傳遞有關(guān)該交叉的一些數(shù)據(jù)時，該函數(shù)將被執(zhí)行。

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

Options 有三個屬性：

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

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

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

用例1：懶加載圖像

要查看加載標(biāo)記，請查看此網(wǎng)頁，因?yàn)榍度胧窖菔静粫@示該標(biāo)記。

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

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

<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 ，包含有關(guān)每個交叉的信息；以及observer本身?？梢赃^濾或循環(huán)遍歷這些entries，然後處理我們想要的交叉entries。至於options，我只提供了rootMargin 值，讓root 和threshold 屬性採用其默認(rèn)值。

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

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

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

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

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

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

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

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

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

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

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

Intersection Observer 當(dāng)然可以做到這一點(diǎn)。

這是我們在HTML 中的視頻：

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

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

 let video = document.querySelector('video');
let isPaused = false; /* 自動暫停視頻的標(biāo)誌*/
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 將採用默認(rèn)值。這等同於說：“嘿，一旦元素在視口中完全可見，就通知我?！?/p>

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

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

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

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

對於一個簡單的示例，我們將觀察頁面上文章列表中每篇文章的最後一段。一旦文章的最後一段完全可見，我們將認(rè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) });

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

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

感謝您的參與！

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

也就是說，在根據(jù)通過觀察者獲得的交叉數(shù)據(jù)進(jìn)行視覺更改時，需要謹(jǐn)慎。當(dāng)然，在記錄交叉數(shù)據(jù)時，Intersection Observer 非常方便。但是，當(dāng)它用於進(jìn)行屏幕上的更改時，我們需要確保更改不會滯後，這是一種可能性，因?yàn)槲覀兓旧鲜歉鶕?jù)異步檢索的數(shù)據(jù)進(jìn)行更改。這可能需要一些時間來加載。

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

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.

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