问题标签 [intersection-observer]

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

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

我正在观察阈值 1。

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

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

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

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

这个问题是关于触摸、滚动和交叉观察回调的执行顺序。

我有一个简单的移动网络应用程序，它有一个可滚动的列表视图，其中每个项目的高度为 100 像素，并且我在视口上放置了交叉点观察器，但上边距为 -100 像素（rootMargin: "-100px 0px 0px 0px"）。

以这种方式完成，以便我的列表项在向上滚动时就可以被观察到。

路口观察者是这样的：

我有 touchmove 处理程序、滚动处理程序和交叉点观察者回调。

现在，只要我触摸并向上滑动，我就会看到执行这些处理程序/回调的一致行为。首先onTouchMove被调用，然后onScroll被调用，最后viewportBottomObserverCallback被调用。总是这样吗？这个问题很重要，因为如果我知道这些 DOM 事件总是按此顺序调用，那么我的代码将变得非常确定。通常，任何其他 DOM 事件都不是这种情况。

为了更好地可视化它，我附上了我的 chrome 分析器的屏幕截图。蓝色里面的部分是我的交叉点观察者回调。

编辑：

我正在 chrome 上以响应模式测试这个，设备是 iPhone 6/7/8。

还有一个问题：任务（交叉点观察者）到事件循环的计算和排队是否仅在update layer tree完成后才发生，特别是这个任务 - https://w3c.github.io/IntersectionObserver/#calculate-intersection-rect-algo？

设置的代码rootMargin如下所示。

当我将它设置为 时100px，根元素的边界框不会增长 100px；当我将它设置为 时-100px，根元素的边界框不会缩小 100 像素。

这是jsFiddle 上的一个示例。示例直接取自MDN 的 IntersectionObserver 文档，我只更改了rootMargin.

使用方法：https ://github.com/w3c/IntersectionObserver/tree/master/polyfill

我应该将它加载到 webpack 配置中 - vue.config.js 还是应该使用导入将它加载到 .vue 模板中？

我正在尝试编写一个测试，当元素在视口中时断言某些东西。

我正在使用IntersectionObserverAPI，事实证明，当浏览器可以发出对观察者的调用时，它们的调用就完成了。

所以问题是，我应该如何处理这样的断言？我应该等一段时间吗？多少毫秒就够了？是否有事件知道浏览器何时完成调用观察者？

目前我正在这样做：

这行得通，但我想知道是否有比等待一段时间更好的方法。

我最近了解了IntersectionObserver，我想知道是否可以使用 IntersectionObserver 或其他 api 进行类似的操作。

我希望能够在我的根视图上定义一条固定的水平线

每当有东西越过那条线时，我想触发一个事件。

我试着做

问题是 IntersectionObserver 只允许父组件成为根视图。

是否可以使用 IO 做我想做的事情，或者有更好的解决方案。

我有两个问题images。我有 1 张图片（我们是 rucab）和一个人作为第二张图片。我intersection observer用来首先展示我们是 rucab 形象，然后是家伙形象。问题是当这个人出现时，我们是 rucab 保持在前面，我希望我们是 rucab 图像返回，并且那个人出现在前面，保持响应，尺寸和所有在相同的位置。我试过玩，z-index absolute positioning但效果不好。你可以在这里看到一个例子。

CSS

图片容器：

第一张图片（我们是rucab）：

第二张图（男）：

JS 路口观察者：

我开始使用 IntersectionObserver API 并且可以创建一些基本的动画，包括元素的隐藏和出现。但是，一旦有人想要滚动回顶部，被其中一个触发器消失的元素就不会再次可见。

到目前为止我的解决方案

所以我想我可能会在交叉点观察者回调函数（我的代码中的stepIandstepII变量）中创建另一个测试变量，它检查回调函数是否之前被触发。如果是这样，不要让元素消失，而是让它们再次出现。

我目前的问题

因此，假设id="hiddenImg"当第一个文本块 ( id="I") 通过视口的 50% 边界时应该出现背景图像 ( )，而当第二个文本块 ( id="II") 进入该区域时它会消失。即使图像在向上滚动时再次可见，如果用户没有完全向后滚动（以便第二个文本块超出视口）然后滚动回底部，则第二个文本块的消失触发器不叫。这意味着背景图像将保持可见，这是不应该的。

这是js部分：

这是我的完整代码：

我正在使用 Intersection Observer 来查看 div 元素是否在视口中，这实际上是页面的底部。在 useEffect 钩子中，我从 Firestore 获取博客并保存到状态，在我滚动到底部第二个获取功能运行后，它会获取另一个博客。我正在使用以前的博客和新博客设置博客状态，但是以前的博客不知何故是空数组。它只输出新的博客，旧的已经消失了。

getBlogs 正在从 Firestore 获取文档并使用获取的博客创建新数组。

我们的页面中有一些 CustomElement，其中一些具有相对于观察它们的视口的 IntersectionObserver。随着设计师似乎喜欢交叉动画，这个数字可能会增加。

这会导致性能问题吗？是拥有一个观察所有元素的 IntersectionObserver 还是多个只观察一个元素的 IntersectionObserver 更好？