IntersectionObserver是什麼？ IntersectionObserver的介紹

這篇文章帶給大家的內容是關於IntersectionObserver是什麼？ IntersectionObserver的介紹，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

讓你追蹤目標元素與其祖先元素或視窗的交叉狀態。此外，儘管只有一部分元素出現在視窗中，即使只有一像素，也可以選擇觸發回呼函數。

IntersectionObserver 為什麼需要它 ？

在我們需要監聽目標元素是否進入視口時，需要監聽scroll事件，大量的計算會造成效能問題

IntersectionObserver 怎麼解決這個問題？

IntersectionObserver API 是異步的，不隨著目標元素的滾動同步觸發。即只有執行緒空閒下來，才會執行觀察器。這意味著，這個觀察器的優先順序非常低，只在其他任務執行完，瀏覽器有了空閒才會執行。

IntersectionObserverEntry 物件

new IntersectionObserver(callback, options)

    let observer = new IntersectionObserver((e) => {
        let isintersecting = e[0].isIntersecting
        console.log(e[0].intersectionRatio)
        if (isintersecting) {
            console.log('我出来了');
        }else{
            console.log('我隐藏了');
        }
    }, {
        root: null
    })
    
    // 观察某个目标元素，一个观察者实例可以观察任意多个目标元素。
    observer.observe(document.querySelector('.scroll-down'))

IntersectionObserverEntry物件提供目標元素的信息，一共有六個屬性。

{
time：可見性改變的時間，是一個高精度時間戳，單位為毫秒
target：被觀察的目標元素，是一個DOM 節點物件
rootBounds：根元素的矩形區域的訊息，getBoundingClientRect()方法的傳回值，如果沒有根元素（即直接相對於視窗滾動），則傳回null
boundingClientRect：目標元素的矩形區域的資訊
intersectionRect：目標元素與視窗（或根元素）的交叉區域的資訊
intersectionRatio：目標元素的可見比例，即intersectionRect佔boundingClientRect的比例，完全可見時為1，完全不可見時小於等於0  
}

options 主要有

{
    root: null, // 指定与目标元素相交的根元素，默认null为视口
    threshold: [] // [0, 0.5, 1] 当目标元素和根元素相交的面积占目标元素面积的百分比到达或跨过某些指定的临界值时就会触发回调函数
    Magin：‘’ // "100px 0" 与margin类型写法，指定与跟元素相交时的延时加载
}

實例方法

observe()

觀察某個目標元素，一個觀察者實例可以觀察任意多個目標元素。注意，這裡可能有同學會問：能不能 delegate？能不能只呼叫一次 observe 方法就能觀察一個頁面裡的所有 img 元素，甚至是那些未產生的？答案是不能，這不是事件，沒有冒泡。

unobserve()

取消對某個目標元素的觀察，延遲載入通常都是一次性的，observe 的回呼裡應該直接呼叫unobserve() 那個元素.

disconnect()

取消觀察所有已觀察的目標元素

takeRecords()

#理解這個方法需要講點底層的東西：在瀏覽器內部，當觀察者實例在某一時刻觀察到了若干個相交動作時，它不會立即執行回調，它會呼叫window.requestIdleCallback() （目前只有Chrome 支援）來異步的執行我們指定的回調函數，而且還規定了最大的延遲時間是100 毫秒，相當於瀏覽器會執行：

requestIdleCallback(() => {
  if (entries.length > 0) {
    callback(entries, observer)
  }
}, {
  timeout: 100
})

#

以上是IntersectionObserver是什麼？ IntersectionObserver的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！