Javascript 交叉点观察者rootBound给出的值不正确

Javascript 交叉点观察者rootBound给出的值不正确,javascript,intersection-observer,Javascript,Intersection Observer,我有一个滚动容器,孩子们在其中垂直滚动。它有许多小元素。我的卷轴容器的高度是100vh。我的任务是在它们到达顶部边界以下100px(在我的例子中是视口顶部)时观察它们 为了实现这一点,我在滚动容器元素上创建了一个交叉点观察者,rootmargin为-100px 0px 0px 我正在观察阈值1 在交叉点观察者回调中,我正在检查:entry.intersectionRect.top==entry.rootBound.top。这确保我只检查最上面的元素 所有这些操作都按预期进行,但有一个问题:在顶部

我有一个滚动容器,孩子们在其中垂直滚动。它有许多小元素。我的卷轴容器的高度是100vh。我的任务是在它们到达顶部边界以下100px(在我的例子中是视口顶部)时观察它们

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

我正在观察阈值1

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

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

我想不应该是这种情况,根边界应该有类似于我在构造函数选项中给出的顶部边距的顶部


对于交叉点观察者来说非常陌生,我想在我的项目中使用它,但不能在不一致的情况下使用它。

对我来说唯一可行的解决方案似乎是在整个视口上放置一个交叉点观察者,但通过10px的上边缘(可以是任何值)。然后观察页面加载时,我们将得到一个
rootBounds
值,该值可以指示什么是
rootBounds.top
。从这里我们可以推断出设备像素比(
givenMargin/rootBounds.top
)。然后,我们可以简单地观察到无限的相交观测者


这对于任何浏览器都是通用的,不用担心检查我们使用的浏览器。或者,我们可以检查浏览器及其版本,然后在代码中导入此类实用程序。

对我来说,唯一可行的解决方案似乎是在整个视口中放置一个相交观察者,但传递10px的上边缘(可以是任何值)。然后观察页面加载时,我们将得到一个
rootBounds
值,该值可以指示什么是
rootBounds.top
。从这里我们可以推断出设备像素比(
givenMargin/rootBounds.top
)。然后,我们可以简单地观察到无限的相交观测者

这对于任何浏览器都是通用的,不用担心检查我们使用的浏览器。或者我们可以检查浏览器及其版本,然后在代码中导入此类实用程序