交叉点观察员rootBound提供的值不正确

Question

我有一个滚动容器，孩子可以在其中垂直滚动。它有很多小元素。我的滚动容器的高度为100vh。我的任务是观察它们何时到达顶部边框（在我的情况下是视口顶部）下方100px处。

要实现这一点，我在我的滚动容器元素上创建了一个以rootmargin为-100px 0px 0px 0px的交集观察器。

我正在观察阈值1。

在路口观察员回调中，我正在检查：entry.intersectionRect.top === entry.rootBound.top。这样可以确保我只检查最上面的元素。

所有这些操作均按预期进行，但有一个问题：观察不到交点位于顶部下方100px，但位于顶部下方81px。我在回调中检查时确认了这一点，entry.rootBound.top的值为81px。

我认为情况并非如此，rootBound的顶部应该与我在构造函数选项中给出的顶部边距相似。

对于路口观察员来说是新手，我想在我的项目中使用它，但不能在不一致的情况下使用它。

Answer 1

对我来说似乎唯一可行的唯一解决方案是在整个视口上放置一个相交观察器，但将顶部边距传递10px（可以是任何值）。然后观察页面加载时，我们将获得一个rootBounds值，并且该值可以指示什么是rootBounds.top。从那里我们可以推断出什么是设备像素比率（givenMargin/rootBounds.top）。然后，我们可以简单地观察该无限交点观察器。

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