交叉口观察者找出元素是显示还是隐藏

Question

Intersection Observer回调函数在显示或隐藏观察到的元素时（达到阈值点时）被调用。

所以我可以知道元素是否消失或即将出现吗？

Answer 1

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

查看“根距”部分，然后在其中使用选项。 阈值也是您感兴趣的一种选择。

Answer 2

无需使用根距和阈值：

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

Answer 3

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

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