元素離開視口時的交點觀察者

Question

有沒有辦法使用 Intersection Observers 檢測元素是否離開視口？ 例如，我在屏幕上有一個元素，我想在該元素的頂部碰到視口頂部時觸發回調。 來自 MDN：

Intersection Observer API 允許代碼注冊一個回調 function，只要他們希望監視的元素進入或退出另一個元素（或視口），或者當兩個元素相交的量按請求的量變化時，就會執行該回調。 -- ( https://developer.mozilla.org/zh-CN/docs/Web/API/Intersection_Observer_API )

因此，如果我做類似下面的事情，我會認為當元素的頂部也碰到視口的頂部時回調會被觸發嗎？

var options = {
    root: document.querySelector('#element'),
    rootMargin: '0px',
    threshold: 0
}

var observer = new IntersectionObserver(callback, options);

但它似乎只在元素頂部滾動並觸及視口底部時才會觸發，但不會同時觸發。 想法？

Answer 1

有沒有辦法檢測元素是否離開視口

是的。 像這樣：

var observer = new IntersectionObserver(function (entries) {
    if (!entries[0].isIntersecting) {
        console.log('Elvis has LEFT the building ');
    }
    else {
        console.log('Elvis has ENTERED the building ');
    }
});

observer.observe(document.querySelector("#Elvis"))

解釋

每次觀察到的元素進入或退出視口時， IntersectionObserver都會“觸發”。 即它在“入口”和“出口”都觸發。

如果您想知道，以發生的情況為准 - 檢查entry的.isIntersecting屬性。

如果為假 - 元素不相交，即它離開了視圖。

如果為真 - 這意味着該元素是部分可見的。 “部分”是多少 - 是intersectionRatio 。

PS 抱歉，我想添加另一個答案，一個更實用的答案

Answer 2

如果我正確理解你要做的事情，你可以將rootMargin設置為'0px 0px -100%' 。 此外， threshold: 0是默認值，因此您無需將其包含在選項對象中。

Answer 3

如果您在此處查看 API文檔，則可以將threshold選項作為數組傳遞，以定義應該觸發回調的交叉級別。 因此，每次元素可見時，傳遞類似[0, 0.8]會觸發回調至少80％，並且當元素不可見時（退出視口）也會觸發回調。

這樣做可能會有其他並發症。 例如，如果存在多個元素，則只要一個元素可見，其他元素就可以退出視口，從而觸發不必要的回調。 我處理它使用一些額外的if條件在我的情況。 我還必須進行一些命中和試驗，以確定最合適的threshold和intersectionRatio threshold 。