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

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

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

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

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

IntersectionObserver 快速概述

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

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

桌面端

移動(dòng)/平板

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

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

好的，現(xiàn)在來(lái)看一下對(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)入視野，而只想在它完全可見(jiàn)時(shí)才知道。諸如此類的事情是通過(guò) options 參數(shù)定義的。

Options 有三個(gè)屬性：

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

假設(shè)我們的 threshold 為 0.5。當(dāng)元素進(jìn)入或超過(guò)其半可見(jiàn)閾值時(shí)，將觸發(fā)回調(diào)。如果值為[0.3, 0.6]，則當(dāng)元素進(jìn)入或超過(guò)其 30% 可見(jiàn)閾值以及其 60% 可見(jiàn)閾值時(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í)占位符，圖像將顯示在該占位符的位置，然后在圖像進(jìn)入（或即將進(jìn)入）視野時(shí)將其替換為預(yù)期的圖像。相信我，實(shí)現(xiàn)這一點(diǎn)一點(diǎn)也不懶惰——也就是說(shuō)，直到我們得到一些原生代碼來(lái)使用。

我們將應(yīng)用相同的機(jī)制。首先，我們有一堆圖像，并定義了一個(gè)初始顯示的占位符圖像。我們使用一個(gè)數(shù)據(jù)屬性來(lái)攜帶要顯示的原始圖像的 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本身?？梢赃^(guò)濾或循環(huán)遍歷這些 entries，然后處理我們想要的交叉 entries。至于 options，我只提供了 rootMargin 值，讓 root 和 threshold 屬性采用其默認(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í)，我們將占位符圖像替換為實(shí)際圖像。

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 是被觀察者觀察的元素。在我們的例子中，這些是圖像元素。一旦在圖像元素中替換了占位符，我們就無(wú)需再觀察它了，因此我們對(duì)其調(diào)用觀察者的 unobserve 方法。

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

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

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

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

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

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

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

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

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

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

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 將采用默認(rèn)值。這等同于說(shuō)：“嘿，一旦元素在視口中完全可見(jiàn)，就通知我。”

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

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

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

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

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

這是一個(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) });

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

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

感謝您的參與！

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

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

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