javascript - 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

如果我的理解是正确的，您应该在和属性entry.intersectionRect级别查看属性，因为它说明了与视口的相交矩形。topbottom

实际上，当top等于时0，表示观察到的条目从视口底部出现，当bottom等于观察到的条目高度时，表示它正在从顶部消失。

Answer 3

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

查看“根边距”部分并使用那里的选项。阈值也是您感兴趣的选项。