PronHub Web 前端技術分享
跟P站學 Web 前端！畫中畫技術實現
跟P站學 Web 前端！fetch 獲取下載進度
跟P站學 Web前端！使用 picture 標籤展示圖片
P站的盈利之一就是網頁上的廣告。但很多用戶為了瀏覽體驗，會選擇使用 ADBlock 進行攔截。這就需要一個工具，來衡量廣告是否真實地展現在頁面中。
歸根結底，廣告在頁面上也是呈現為一個元素。所以，問題可以轉換為：如何判斷元素的真實可見性。
如何判斷元素的可見性
可能你的第一感覺是判斷元素是否使用了隱藏即可，可是，元素隱藏的方式有很多種：
- visibility: hidden
- opacity: 0;
- display: none;
- z-index
- margin-left: -9999px;
除了上述列舉這些，還存在很多方法使元素在頁面中不可見。而且可見性還會和父元素的可見性有關，所以判斷元素可見性是一個複雜的問題。
而 Intersection Observer 可以輕鬆解決問題。
什麼是 Intersection Observer
IntersectionObserver（交集觀察者）作為 Web API。在設計之初，目的是以一種異步的方式來觀察元素的相交性（即判斷兩個元素是否相交）。
而隨著 API 的迭代，它擴展了功能，可以用於判斷元素的真實可見性。
這個 API 是基於觀察者模式的，有相關知識儲備更加容易上手。
Intersection Observer 使用方法：
首先需要創建出 IntersectionObserver 實例。
- callback 是當兩個元素相交狀態變更時被調用
- options 是相關配置選項，例如指定容器元素、指定觸發事件的頻率等。
在觀察者模式中，創建出主題實例後，我們需要訂閱可觀察者對象，而 DOM 元素在這裡就是作為 observer。
瞭解使用 API 的使用方法後，接下來就是細節實現。假如希望判斷 inner 元素在 wrap 元素中的可見性，則 ——
觀察上述代碼：
- callback 回調函數中， changes 參數中的 isVisible 屬性就是我們希望得到的元素真實可見性。
- 而 options 中的 trackVisibility 和 delay 是開啟獲取 isVisible 屬性的必備選項。出於性能考慮，必須同時設置這兩個屬性後，獲取的 isVisible 才是正確的。否則不管元素是否可見， isVisible 均為 false。
結語
以上是對「前端如何判斷元素的真實可見性」的簡單討論。
在P站的 Web 前端技術分享中，技術負責人對這個 API 的喜愛之情溢於言表。畢竟除了提到的可用於判斷廣告是否被 ADBlock 屏蔽，由於它還能判斷元素的相交性，所以也能用於圖片的懶加載功能。
你的點贊轉發收藏，是我創作的動力。歡迎評論區討論，留言必回。
閱讀更多 前端專欄 的文章
