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

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

有没有办法检测元素是否离开视口

是的。像这样：

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每次观察到的元素进入或退出视口时都会“触发”。即它在“入口”和“出口”都触发。

如果您想知道，无论发生什么情况 -.isIntersecting检查entry.

如果为 false - 元素不相交，即它离开了视图。

如果为 true，则意味着该元素部分可见。“部分”是多少 - 是intersectionRatio.

PS 抱歉，我想添加另一个答案，一个更实用的答案

Answer 2

如果您在此处阅读API 文档，则threshold可以将该选项作为数组传递，以定义应触发回调的交集级别。因此，[0, 0.8]每次元素可见至少 80% 以及元素不可见（退出视口）时，传递类似的东西都会触发回调。

执行此操作时可能会出现其他并发症。例如，如果有多个元素，每当一个元素可见时，其他元素可能会退出视口，从而触发不必要的回调。if在我的情况下，我使用一些额外的条件来处理它。我也不得不做一些命中和试验，以确定最合适的数值threshold和intersectionRatio。

Answer 3

如果我正确理解您要做什么，您可以设置rootMargin为'0px 0px -100%'. 此外，threshold: 0是默认值，因此您无需将其包含在您的选项对象中。