交叉口观察器阈值不起作用
Intersection observer thresholds value not working
Intersection Observer 中的阈值选项似乎不起作用。
为了提供更多上下文,我的列表项在视口中呈现,我希望每个项目都在视口的交点观察器上观察。问题是,我需要以 25% 的步长观察它们。两者都在进入视口时 and/or 离开视口。
根据文档,似乎提供阈值数组作为 [0, 0.25, 0.50. 0.75, 1]
应该可以完成工作,但实际上它与给它一个 0 或 1 的值没有任何区别。
我想在我的滚动视图中每次元素的交集增加或减少 25% 时观察变化。
您可以在 - https://codesandbox.io/s/rm46m1qy7o
上查看我的代码
我在 Windows 10 上使用 chrome v72。
答案很简单。 thresholds
是只读 属性。我们传入构造函数的是threshold
。感谢 @David784 回答这个问题。
对于其他因为阈值不起作用而来到这里的人,我会提到另一个让我困惑一秒钟的怪癖....
如果只是一个值,应该是原始数据类型。 (即{threshold: 0.1})如果你只有一个值并将它放在一个数组中(即{threshold: [0.1]}),它不会起作用。
但是多个值需要一个数组。
Intersection Observer 中的阈值选项似乎不起作用。
为了提供更多上下文,我的列表项在视口中呈现,我希望每个项目都在视口的交点观察器上观察。问题是,我需要以 25% 的步长观察它们。两者都在进入视口时 and/or 离开视口。
根据文档,似乎提供阈值数组作为 [0, 0.25, 0.50. 0.75, 1]
应该可以完成工作,但实际上它与给它一个 0 或 1 的值没有任何区别。
我想在我的滚动视图中每次元素的交集增加或减少 25% 时观察变化。
您可以在 - https://codesandbox.io/s/rm46m1qy7o
上查看我的代码我在 Windows 10 上使用 chrome v72。
答案很简单。 thresholds
是只读 属性。我们传入构造函数的是threshold
。感谢 @David784 回答这个问题。
对于其他因为阈值不起作用而来到这里的人,我会提到另一个让我困惑一秒钟的怪癖....
如果只是一个值,应该是原始数据类型。 (即{threshold: 0.1})如果你只有一个值并将它放在一个数组中(即{threshold: [0.1]}),它不会起作用。
但是多个值需要一个数组。