如果阈值大于0,则IntersectionObserver isIntersecting属性永远不会为false

时间:2018-02-17 02:04:58

标签: javascript dom intersection-observer

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

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

这似乎是不同的行为。有没有人对这种行为有解释?

1 个答案:

答案 0 :(得分:4)

这是因为只有在元素超过阈值比率时才会调用您的观察者回调。

默认情况下,阈值为0,因此当元素进入或离开视口时会调用回调。当您将阈值更改为1.0时,当元素变为100%可见时,您的回调将被调用,或者停止100%可见。

当元素停止为100%时,它将显示为99%可见,并且仍然isIntersectingtrue。然后,当元素离开视口时,它与您的观察者无关(因为您的阈值不是0),因此不会再次调用您的回调。

如果您关心元素变为100%可见并离开视口,则可以将数组作为阈值传递(如[0, 1.0]),并且当超过任何这些比率时将调用您的回调。< / p>

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

暂且不说:我原本认为entry.isIntersecting只是entry.intersectionRatio > 0的简写。但我发现Chrome(65)可以将isIntersecting报告为true,但intersectionRatio为0,当某些内容非常缓慢地进入视口时。