1

我有一个滚动容器,孩子们在垂直方向滚动。它有很多小元素。我的滚动容器的高度是 100vh。我的任务是在它们到达顶部边框下方 100 像素(在我的情况下是视口顶部)时立即观察它们。

为了实现这一点,我在我的滚动容器元素上创建了一个交叉点观察器,其 rootmargin 为-100px 0px 0px 0px.

我正在观察阈值 1。

在交叉点观察者回调中,我正在检查:entry.intersectionRect.top === entry.rootBound.top。这确保我只检查最顶层的元素。

所有这些操作都按预期进行,但存在一个问题:在顶部下方 100 像素处未观察到交叉点,但在顶部下方 81 像素处未观察到交叉点。当我在回调中检查时,我确认了这一点,entry.rootBound.top 的值为 81px。

我想这不应该是这种情况,rootBound 的顶部应该与我在构造函数选项中给出的顶部边距相似。

对交叉点观察者来说非常新,我想在我的项目中使用它,但由于不一致而不能这样做。

4

1 回答 1

0

对我来说似乎工作正常的唯一可能的解决方案是将交叉点观察器放在整个视口上,但通过 10px 的上边距(可以是任何值)。然后观察当页面加载时,我们会得到一个rootBounds值,它可以指示什么是rootBounds.top. 从那里我们可以推断什么是设备像素比(givenMargin/rootBounds.top)。然后我们可以简单地不观察那个 Infinite 相交观察者。

这适用于任何浏览器,无需担心检查我们正在使用哪个浏览器。或者我们可以检查浏览器及其版本,然后在我们的代码中导入这种实用程序。

于 2019-05-23T10:00:10.520 回答