如果我将该threshold值配置为大于 0的值，isIntersecting则在目标离开视口时永远不会返回 false。但是，如果我将默认阈值保留为 0，isIntersecting则当目标退出视口时将返回 false。请参阅下面的示例并删除threshold: 1.0.
https://jsfiddle.net/snewcomer24/get0a4xr/1/
这似乎是不同的行为。有人对这种行为有解释吗？
8197 次
1 回答
15
这是因为仅当元素超过阈值比率时才会调用您的观察者回调。
默认情况下，阈值为 0，因此当元素进入或离开视口时会调用回调。当您将阈值更改为 1.0 时，您的回调会在元素变为 100% 可见或停止为 100% 可见时调用。
当元素不再是 100% 时，它将是 99% 可见的东西，并且仍然isIntersecting具有true. 然后，当元素离开视口时，它与您的观察者无关（因为您的阈值不是 0），因此不会再次调用您的回调。
如果您关心元素变为 100% 可见并离开视口，您可以传递一个数组作为阈值（如[0, 1.0]），并且当超过任何这些比率时将调用您的回调。
https://jsfiddle.net/wzst4jx5/12/
旁白：我原本以为entry.isIntersecting只是entry.intersectionRatio > 0. 但我发现 Chrome (65) 可以报告isIntersecting为 true，但报告intersectionRatio为 0，当某些东西非常缓慢地进入视口时。
于 2018-03-18T19:31:28.927 回答