本文深入研究了交叉點(diǎn)觀察者API，比典型的入門指南具有更深的理解。儘管許多資源專注於如何使用它，但此探索旨在解釋其工作原因和方式，從而為各個(gè)級(jí)別的開發(fā)人員彌合了差距。

在W3C草稿中定義的交叉點(diǎn)觀察者API提供了一種機(jī)制，可以監(jiān)視相對(duì)於容器（root）（例如視口）的DOM元素（目標(biāo)）的可見性和位置。這種異步方法有效地處理了元素的可見性，非常適合預(yù)載和懶惰的內(nèi)容。這是傳統(tǒng)滾動(dòng)活動(dòng)聽眾的性能替代方案，儘管不一定是完全替代者；兩者都可以協(xié)同使用。

相交觀察者的核心組成部分：

1. root ：包含觀察到的元素的父元素（或視口的null ）。
2. target ：觀察到子元素。
3. options對(duì)象：配置觀察者行為（下面解釋）。
4. callback功能：每當(dāng)發(fā)生交集發(fā)生變化時(shí)執(zhí)行。

基本示例：

 const Options = {
  root：document.body，
  rootmargin：'0px'，
  閾值：0
};

函數(shù)回調(diào)（條目，觀察者）{
  console.log（觀察者）; //觀察者詳細(xì)信息
  entries.foreach（entry => console.log（entry））; //每個(gè)目標(biāo)的交集詳細(xì)信息
}

讓Observer = new IntersectionObserver（回調(diào)，選項(xiàng)）;
observer.observe（targetlement）;

了解options對(duì)象：

• root ：如前所述，包含元素。 null默認(rèn)為視口。
• rootMargin ：一個(gè)CSS邊緣樣字符串（例如， '10px 20px' ），它擴(kuò)展或收縮了根的邊界框，影響相交檢測(cè)。僅允許像素和百分比。如果root為null ，則不起作用。
• threshold ：一個(gè)數(shù)字（0-1）或數(shù)字?jǐn)?shù)組，代表觸發(fā)回調(diào)所需的目標(biāo)交叉點(diǎn)百分比。 0觸發(fā)任何十字路口；僅當(dāng)整個(gè)目標(biāo)都在根內(nèi)時(shí)，只有1觸發(fā)。

callback功能和IntersectionObserverEntry ：

回調(diào)接收一系列IntersectionObserverEntry對(duì)象，每個(gè)觀察到的目標(biāo)一個(gè)。關(guān)鍵屬性包括：

• isIntersecting ：一個(gè)布爾值表示相交。
• intersectionRatio ：目標(biāo)相交的目標(biāo)百分比（0-1）。
• boundingClientRect ：相對(duì)於視口的目標(biāo)邊界矩形。
• intersectionRect ：交叉區(qū)域的矩形。
• rootBounds ：相對(duì)於視口的根的邊界矩形。
• target ：參考觀察到的目標(biāo)元素。
• time ：交叉路口的時(shí)間戳更改。

交叉點(diǎn)觀察者方法：

• observe(target) ：將目標(biāo)添加到觀察者。
• unobserve(target) ：刪除目標(biāo)。
• disconnect() ：停止觀察所有目標(biāo)。

性能比較：交叉點(diǎn)觀察者與滾動(dòng)事件：

基準(zhǔn)測(cè)試揭示了交叉點(diǎn)觀察者的出色表現(xiàn)，尤其是在處理許多元素時(shí)。儘管滾動(dòng)事件需要手動(dòng)計(jì)算以進(jìn)行交叉檢測(cè)，但交叉點(diǎn)觀察者直接提供了此數(shù)據(jù)，從而導(dǎo)致效率的顯著提高。

intersectionRatio精度和位置確定：

雖然intersectionRatio提供一定比例的交叉點(diǎn)，但並不總是完全精確。將其與boundingClientRect ， intersectionRect和rootBounds結(jié)合使用，可以在根內(nèi)確定精確的位置確定。

創(chuàng)建“粘性”位置事件：

巧妙地使用rootMargin （ '0px 0px -100% 0px' ）可以模擬“粘性”位置事件，當(dāng)元素到達(dá)其容器頂部時(shí)觸發(fā)回調(diào)。

結(jié)合滾動(dòng)事件：

為了提高精度，將交叉觀察者與滾動(dòng)事件相結(jié)合。觀察者可以根據(jù)可見度有效地管理事件偵聽器的附件/刪除，從而優(yōu)化性能。

瀏覽器支持和怪癖：

交叉點(diǎn)觀察者享有廣泛的瀏覽器支持，可用於較舊的瀏覽器。但是，在不同的瀏覽器處理涉及transform和clip-path的動(dòng)畫的方式中存在較小的不一致之處。

交叉點(diǎn)觀察者V2（提議）：

未來版本提出了trackVisibility和delay選項(xiàng)，以提高可見性檢測(cè)，考慮不透明度和重疊元素。但是，這仍在開發(fā)中。

總之，交叉點(diǎn)觀察者API是有效管理元素可見性和位置的強(qiáng)大工具，提供了比傳統(tǒng)滾動(dòng)事件處理的性能優(yōu)勢(shì)。了解其細(xì)微差別可以解鎖其創(chuàng)建複雜和性能的Web應(yīng)用程序的全部潛力。

以上是相交觀察者如何手錶的解釋的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！