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

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

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

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

基本示例：

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

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

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

了解options對象：

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

callback功能和IntersectionObserverEntry ：

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

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

交叉點觀察者方法：

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

性能比較：交叉點觀察者與滾動事件：

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

intersectionRatio精度和位置確定：

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

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

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

結(jié)合滾動事件：

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

瀏覽器支持和怪癖：

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

交叉點觀察者V2（提議）：

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

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

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