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

Posted 2023-05-08

【中文标题】元素离开视口时的交点观察者

【英文标题】：Intersection Observer when element leaves the viewport

【发布时间】：2019-04-17 18:52:25

【问题描述】：

有没有办法使用 Intersection Observers 检测元素是否离开视口？例如，我在屏幕上有一个元素，我想在元素顶部到达视口顶部时触发回调。来自 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);

但它似乎只在元素顶部滚动并触及视口底部时才会触发，但不是两者兼而有之。想法？

【参考方案1】：

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

【讨论】：

这真的很有帮助，但我很难理解它为什么起作用。 This article 在讨论粘性元素的部分有很大帮助。

【参考方案2】：

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

执行此操作时可能会出现其他并发症。例如如果有多个元素，当一个元素可见时，另一个元素可能会退出视口，从而触发不必要的回调。在我的案例中，我使用了一些额外的if 条件来处理它。我还必须进行一些测试以确定threshold 和intersectionRatio 的最合适的值。

【讨论】：

太棒了，您已经对if 进行了测试，以了解哪个div 在起作用或类似的东西？对我来说，精确的其他阈值继续只观察元素的底部看起来

是的，我必须检查视口内的哪个 div 实际上应该考虑使用 if 条件。为了做到这一点，我还必须考虑滚动的方向。

实际上我认为 0 阈值意味着“任何数量”的观察到的都会触发回调。我发现了这个问题，因为我有同样的问题。我需要做一些测试，但我认为我的问题是“当观察到的根区域退出时 interseationobserver 会触发”

当intersectionRatio 向前或向后超过阈值时将触发回调。因此，阈值为 0 时，回调将在比率大于 0 时触发，并且在比率为 0 时再次触发。所以回答您的问题，如果阈值为 0，当观察到的元素退出时，交叉点观察器将触发根区。如果阈值为 0.5，则当 50% 的元素进入视口和 50% 的元素离开视口时，交叉点观察器将触发。