交点观察者 rootBound 给出了不正确的值
Intersection observer rootBound gives incorrect value
我有一个滚动容器，其中 children 在垂直方向滚动。它有很多小元素。我的滚动容器的高度是 100vh。我的任务是在它们到达顶部边框下方 100px（在我的例子中是视口顶部）时立即观察它们。
为了实现这一点，我在我的滚动容器元素上创建了一个相交观察器，rootmargin 为 -100px 0px 0px 0px。
我正在观察阈值 1。
在路口观察者回调中，我正在检查：entry.intersectionRect.top === entry.rootBound.top。这确保我只检查最顶层的元素。
所有这些操作都按预期进行，但有一个问题：在顶部下方 100 像素处未观察到交点，但在顶部下方 81 像素处观察到交点。我在回调中检查时确认了这一点，entry.rootBound.top 的值是 81px.
我想这不应该是这种情况，rootBound 的顶部应该与我在构造函数选项中给出的顶部边距相似。
对路口观察器非常陌生，我想在我的项目中使用它，但由于不一致而不能这样做。
在我看来唯一可行的解决方案是在整个视口上放置一个路口观察器，但传递 10 像素的上边距（可以是任何值）。然后观察当页面加载时，我们会得到一个 rootBounds 值，它可以指示什么是 rootBounds.top。从那里我们可以推断出什么是设备像素比（givenMargin/rootBounds.top）。然后我们可以简单地不观察那个 Infinite intersection 观察者。
这适用于任何浏览器，无需担心检查我们使用的是哪种浏览器。或者我们可以检查浏览器及其版本，然后在我们的代码中导入这种实用程序。
我有一个滚动容器，其中 children 在垂直方向滚动。它有很多小元素。我的滚动容器的高度是 100vh。我的任务是在它们到达顶部边框下方 100px（在我的例子中是视口顶部）时立即观察它们。
为了实现这一点，我在我的滚动容器元素上创建了一个相交观察器，rootmargin 为 -100px 0px 0px 0px。
我正在观察阈值 1。
在路口观察者回调中，我正在检查：entry.intersectionRect.top === entry.rootBound.top。这确保我只检查最顶层的元素。
所有这些操作都按预期进行，但有一个问题：在顶部下方 100 像素处未观察到交点，但在顶部下方 81 像素处观察到交点。我在回调中检查时确认了这一点，entry.rootBound.top 的值是 81px.
我想这不应该是这种情况，rootBound 的顶部应该与我在构造函数选项中给出的顶部边距相似。
对路口观察器非常陌生，我想在我的项目中使用它，但由于不一致而不能这样做。
在我看来唯一可行的解决方案是在整个视口上放置一个路口观察器，但传递 10 像素的上边距（可以是任何值）。然后观察当页面加载时，我们会得到一个 rootBounds 值，它可以指示什么是 rootBounds.top。从那里我们可以推断出什么是设备像素比（givenMargin/rootBounds.top）。然后我们可以简单地不观察那个 Infinite intersection 观察者。
这适用于任何浏览器，无需担心检查我们使用的是哪种浏览器。或者我们可以检查浏览器及其版本，然后在我们的代码中导入这种实用程序。