javascript - 如果阈值大于 0，IntersectionObserver isIntersecting 属性永远不会为 false

Question

如果我将 threshold 值配置为任何大于 0 的值，当目标离开视口(viewport)时，isIntersecting 永远不会返回 false。但是，如果我将默认阈值保留为 0，isIntersecting 将在目标退出视口(viewport)时返回 false。请参见下面的示例并删除 threshold: 1.0。

https://jsfiddle.net/snewcomer24/get0a4xr/1/

这看起来像是不同的行为。有人对此行为有解释吗？

Answer 1

这是因为您的观察者回调仅在元素超过阈值比率时被调用。

默认阈值为 0，因此当元素进入或离开视口(viewport)时会调用回调。当您将阈值更改为 1.0 时，您的回调将在元素变为 100% 可见或停止 100% 可见时被调用。

当元素不再是 100% 时，它将达到 99% 可见，并且 isIntersecting 仍为 true。然后，当元素离开视口(viewport)时，它与您的观察者无关(因为您的阈值不为 0)，因此不会再次调用您的回调。

如果您关心元素变得 100% 可见和离开视口(viewport)，您可以传递一个数组作为阈值(如 [0, 1.0])，并且您的回调将在任何时候被调用这些比率交叉。

https://jsfiddle.net/wzst4jx5/12/

旁白:我最初认为 entry.isIntersecting 只是 entry.intersectionRatio > 0 的简写。但我发现 Chrome (65) 可以报告 isIntersecting 为真，但 intersectionRatio 为 0，当某些东西非常缓慢地进入视口(viewport)时。