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