Question

是否可以使用“相交观察器”检测元素是否离开视口？例如，我在屏幕上有一个元素，当元素的顶部碰到视口的顶部时，我想触发一个回调。来自MDN：

Intersection Observer API使代码可以注册一个回调函数，该回调函数将在他们希望监视进入或退出另一个元素（或视口）的元素或两个元素相交的数量时执行更改要求的数量。 -（https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API）

因此，如果我执行以下操作，我会以为元素的顶部也到达视口的顶部时会触发回调？

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

var observer = new IntersectionObserver(callback, options);

但是，仅当元素的顶部滚动并击中视口的底部时才触发，但不能同时触发。想法？

Answer 1

如果您浏览API文档here，则threshold选项可以作为数组传递，以定义应在哪个交集级别上触发回调。因此，每次元素可见至少80％以及元素不可见（退出视口）时，传递类似[0, 0.8]之类的命令都会触发回调。

这样做可能还会有其他并发症。例如如果有多个元素，则每当一个元素可见时，其他元素可能会退出视口，从而触发不必要的回调。在我的情况下，我使用一些附加的if条件来处理它。我还必须进行一些尝试才能确定threshold和intersectionRatio的最合适值。

Answer 2

如果我正确理解您要执行的操作，则可以将rootMargin设置为'0px 0px -100%'。另外，threshold: 0是默认设置，因此您无需在选项对象中包含它。

元素离开视口时的交集观察者

2 个答案: