首页 > 解决方案 > 交叉点观察者阈值不起作用

问题描述

Intersection Observer 中的阈值选项似乎不起作用。

为了提供更多上下文,我的列表项在视口中呈现,我希望每个项目都在视口的 Intersection 观察者上观察。问题是,我需要以 25% 的步长观察它们。当他们进入视口和/或离开视口时。

根据文档,似乎提供阈值数组[0, 0.25, 0.50. 0.75, 1]应该可以完成工作,但实际上它与给它的值为 0 或 1 没有任何区别。我想观察每次元素的交点增加或减少 25% 时的变化我的滚动视图。

你可以检查我的代码 - https://codesandbox.io/s/rm46m1qy7o

我在 Windows 10 上使用 chrome v72。

标签: javascriptintersection-observer

解决方案


对于其他因阈值不起作用而来到这里的人,我会提到另一个让我困惑一秒钟的怪癖......

如果它只是一个值,它应该是一种原始数据类型。(即{threshold: 0.1})如果你只有一个值并将它放在一个数组中(即{threshold: [0.1]}),它不会起作用。

但是多个值需要一个数组。


推荐阅读