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

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

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

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

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

IntersectionObserver 快速概述

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

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

桌面端

移動(dòng)/平板

但是，如果你想在使用Intersection Observer 時(shí)檢查它是否受支持，你可以查看window 對(duì)像中是否存在IntersectionObserver 屬性：

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

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

 var observer = new IntersectionObserver(callback, options);

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

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

Options 有三個(gè)屬性：

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

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

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

用例1：懶加載圖像

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

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

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

<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 => {
    /* 在這里處理每個(gè)交叉*/
  });
}, 
{rootMargin: "0px 0px -200px 0px"});

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

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

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

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

當(dāng)圖像與視口的觀察區(qū)域（在演示中距離底部上方200 像素）相交時(shí)，我們將佔(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)位符，我們就無需再觀察它了，因此我們對(duì)其調(diào)用觀察者的unobserve方法。

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

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

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

用例2：元素離開視野時(shí)自動(dòng)暫停視頻

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

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

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

這是我們?cè)贖TML 中的視頻：

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

這是我們?cè)诿看谓徊妫磂ntry）期間暫停和播放視頻的方式：

 let video = document.querySelector('video');
let isPaused = false; /* 自動(dòng)暫停視頻的標(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）期間暫停和播放視頻之前，我想提請(qǐng)你注意options 的threshold 屬性。

threshold 的值為1。 root 和rootMargin 將採(cǎi)用默認(rèn)值。這等同於說：“嘿，一旦元素在視口中完全可見，就通知我?！?/p>

一旦發(fā)生交叉並觸發(fā)回調(diào)，我們將根據(jù)以下邏輯暫停或播放視頻：

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

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

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

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

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

我們簡(jiǎn)化的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) });

在每次交叉（即文章的最後一段完全可見）期間，我們都會(huì)遞增一個(gè)計(jì)數(shù)器：n，它表示已閱讀的文章總數(shù)。然後，我們?cè)谖恼铝斜砩戏斤@示該數(shù)字。

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

感謝您的參與！

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

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

正如我們所看到的，每個(gè)交叉entry 都有一個(gè)屬性集，用於傳達(dá)有關(guān)交叉的信息。在本篇文章中，我沒有介紹所有這些屬性，因此請(qǐng)務(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.

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