Intersection Observer 找出元素是顯示還是隱藏

Question

每當顯示或隱藏觀察到的元素時（達到閾值時），都會調用Intersection Observer回調函數。

那么我可以讓元素即將消失還是即將出現？

Answer 1

無需使用根邊距和閾值：

const callback = (entries, observer) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            console.log("entering element");
        } else {
            console.log("leaving element");
        }
    });
};

Answer 2

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

查看“根邊距”部分並使用那里的選項。 閾值也是您感興趣的選項。

Answer 3

如果我的理解是正確的，您應該查看top和bottom屬性級別的entry.intersectionRect屬性，因為它考慮了與視口的交集矩形。

實際上，當top等於0 ，表示觀察到的條目從視口的底部出現，當bottom等於觀察到的條目高度時，表示它從頂部消失。