IntersectionObserver isIntersecting 属性 如果阈值大于 0,则永远不会为 false
IntersectionObserver isIntersecting property never is false if threshold greater than 0
如果我将 threshold
值配置为任何大于 0 的值,当目标离开视口时,isIntersecting
永远不会 return 为 false。但是,如果我将默认阈值保留为 0,则当目标退出视口时 isIntersecting
将 return false。请参见下面的示例并删除 threshold: 1.0
.
https://jsfiddle.net/snewcomer24/get0a4xr/1/
这似乎是不同的行为。有人对此行为有解释吗?
这是因为您的观察者回调仅在元素超过阈值比率时被调用。
默认阈值为0,因此当元素进入或离开视口时调用回调。当您将阈值更改为 1.0 时,您的回调 而不是 在元素变为 100% 可见或停止为 100% 可见时调用。
当元素不再是 100% 时,它的可见度将达到 99%,并且仍然有 isIntersecting
和 true
。然后,当元素离开视口时,它与您的观察者无关(因为您的阈值不为 0),因此您的回调不会再次调用。
如果您关心元素变得 100% 可见并离开视口,您可以传递一个数组作为阈值(如 [0, 1.0]
),当超过任何这些比率时将调用您的回调.
https://jsfiddle.net/wzst4jx5/12/
旁白:我最初认为 entry.isIntersecting
只是 shorthand 对应 entry.intersectionRatio > 0
。但我发现 Chrome (65) 可以报告 isIntersecting
为真,但 intersectionRatio
为 0,当某些东西非常缓慢地进入视口时。
如果我将 threshold
值配置为任何大于 0 的值,当目标离开视口时,isIntersecting
永远不会 return 为 false。但是,如果我将默认阈值保留为 0,则当目标退出视口时 isIntersecting
将 return false。请参见下面的示例并删除 threshold: 1.0
.
https://jsfiddle.net/snewcomer24/get0a4xr/1/
这似乎是不同的行为。有人对此行为有解释吗?
这是因为您的观察者回调仅在元素超过阈值比率时被调用。
默认阈值为0,因此当元素进入或离开视口时调用回调。当您将阈值更改为 1.0 时,您的回调 而不是 在元素变为 100% 可见或停止为 100% 可见时调用。
当元素不再是 100% 时,它的可见度将达到 99%,并且仍然有 isIntersecting
和 true
。然后,当元素离开视口时,它与您的观察者无关(因为您的阈值不为 0),因此您的回调不会再次调用。
如果您关心元素变得 100% 可见并离开视口,您可以传递一个数组作为阈值(如 [0, 1.0]
),当超过任何这些比率时将调用您的回调.
https://jsfiddle.net/wzst4jx5/12/
旁白:我最初认为 entry.isIntersecting
只是 shorthand 对应 entry.intersectionRatio > 0
。但我发现 Chrome (65) 可以报告 isIntersecting
为真,但 intersectionRatio
为 0,当某些东西非常缓慢地进入视口时。