问题标签 [intersection-observer]

我一直在查看 IntersectionObserver 来检测 en 元素何时对用户可见，方法是检查它是否在视口内。但是，如果另一个元素覆盖了“目标”元素，似乎只有在我们知道要具体观察哪些元素的情况下才能检测到这一点，因为观察者总是需要一个目标和一个根来进行比较：

我需要做的是指定一个要观察的目标，然后检测任何其他元素何时覆盖它，这似乎使用 IntersectionObserver 是不可能的。感谢任何能提供帮助的人！

我有以下 IntersectionObserver 代码，该代码用作网站上所有工作正常的动画的滚动触发器。

但是，我想将作为 IntersectionObserver 调用的 forEach() 方法切换到 for 循环，但我无法让它工作。

我确信这是可以做到的，但这让我有点发疯。

想要这样做的原因是因为我使用了一个 polyfill，以便 IntersectionObserver 在旧版本的 IE 和 Edge 中工作，但当然 forEach() 方法在这些浏览器中不起作用。

我在代码底部的循环中注释掉了我的尝试。

任何帮助都会很棒。

代码笔： https ://codepen.io/emilychews/pen/xJaZay

我正在寻找一种方法来在菜单中显示用户在页面上的位置。每个菜单项都有指向另一个元素的锚链接和 IntersectionObserver，它为项目设置背景宽度，以及项目是否从底部或顶部显示（背景左右）

但是当元素高度大于可见窗口的高度并且视图位于元素中间时，不会触发回调。这有点明显，因为达到了阈值 1.0。但我正在寻找继续观察元素的方法。发生这种情况时，我想附加在滚动条上，但没有办法说是否发生这种情况。

我应该为此使用滚动事件还是任何解决方法？

//编辑：这是我正在做的视频https://drive.google.com/file/d/1gPrIWgcLTJ3vhquyrUnyyh9IlTuZiDRJ/view

我使用 vivus.js 为 SVG 制作动画。我想知道在性能方面将它与交叉点观察器结合使用的最佳方法是什么。

在我的页面上有几个部分，包括内联 svg。这些 svg 应该在向下滚动页面时进行动画处理，在离开视口时停止并在再次观察容器时重新启动。

它有效，但我不确定这是否是构建 vivus 对象并以这种方式一次又一次地播放它们的最佳方式。这些解决方案似乎使 Firefox 性能崩溃..

我欢迎所有意见、建议和改进建议。

我创建了一支笔：

https://codepen.io/Milenoi/pen/JBxgOG

请注意：没有 Polyfill 可以在 Chrome + Firefox 中使用

如您所见，动画没有按预期工作，svg 动画在离开观察者时应该停止并重新开始 wenn 元素再次相交..

我在 JavaScript 中使用 div 来测试 JavaScript 的交叉点观察器 api ( https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API )。我本质上是在测试当 div 进入视口时它能够检测到它们的能力。我要测试的另一件事是交叉点观察者 api 处理大量 div 的能力。目前我有 30 个手动复制的 div，如下所示：

我的目标是真正推动这个测试并且可能有 500 多个 div，但认为我必须手动输入 500 多个 div 似乎有点愚蠢。我想知道是否有更简单的方法来实现这个数量的多个 div？我在网上阅读并看到人们谈论为它编写脚本，但没有详细说明或可用的示例会有所帮助，因为我不完全理解它是如何工作的。

这是我正在使用的代码：

这适用于页面上的元素，但不适用于稍后动态创建的元素。如何绑定稍后插入页面的元素？

我知道使用 jquery 你可以像绑定它一样$(document).on('event', 'element', 'func');，但是我该如何使用观察者呢？

我在站点上使用 Intersection Observer API。对于使用它的每个实例，我都使用相同的配置（主视口）。我的问题是我需要在触发回调时发生不同的事情。对于某些人来说，我想延迟加载图像。对于某些人来说，我想初始化一个轮播等。

有没有办法为所有这些不同的应用程序使用相同的观察者，或者我必须为每个独特的回调使用不同的观察者？

我正在使用 Intersection Observer API，我想知道：

如何对 Intersection Observer API 进行去抖动或限制？

如果我想提高性能，你推荐使用 debounce 或 throttle 功能吗？

像这样给定IntersectionObserver：

如何检查节点本身是否实际上在视口中，或者只是导致观察者被调用的intersectionMargin？

我有一个修改后的 Bootstrap 4 轮播，它有多个项目并使用这个 JavaScript 逐个滚动：

这将创建具有多个轮播列的每个轮播项的克隆，如下所示：

我正在尝试使用 Intersection Observer API 实现延迟加载，但是在轮播中，它仅适用于每个轮播项目中第一个轮播列中的图像。我猜这是由于克隆，但我不确定如何解决冲突。API 看不到识别克隆图像的存在。

有人对我如何解决这个问题有任何见解吗？

这是我用于延迟加载的 JavaScript：