我的应用程序中有一个（编写得相当糟糕的）javascript 组件来处理无限滚动分页，我正在尝试重写它以使用，如此处IntersectionObserver所述，但是我在测试它时遇到了问题。

有没有办法在 QUnit 测试中驱动观察者的行为，即用我的测试中描述的一些条目触发观察者回调？

我想出的一个可能的解决方案是在组件的原型中公开回调函数并在我的测试中直接调用它，如下所示：

我不太喜欢这种方法，因为它暴露了组件在IntersectionObserver内部使用的事实，这是我认为客户端代码不应该看到的实现细节，那么有没有更好的方法来测试它？

对不使用 jQuery 的解决方案的额外热爱 :)

在任何人在这里付出太多努力之前，我已经有了一个讨厌的解决方法。我只是想知道是否有人让它工作。

Edge 15 版现已发布，并支持交叉点观察器（用于延迟加载）。

我已经实现了它，它在所有支持它的浏览器中都能正常工作（Chrome 和 Opera。Firefox 和 Safari 还没有实现），但在 Edge 中根本不行。

没有抛出错误，但从未调用回调。

选项如下，没什么特别的：

这是 React 组件的一部分，但不明白为什么会有所作为。

由于我想使用您可以在许多网站上看到的滚动淡入功能，我想知道如何在我的应用程序中以“角度方式”实现此类功能。我已经有一个有效的组件实现，也许这可以帮助任何需要在滚动行为上使用这种淡入的人。

我对下面（缩短的）代码的问题是它不支持依赖注入，因为它总是创建一个新的 IntersectionObserver 实例。

如您所见，这非常有效，但是对于多个组件来说设置太多，并且根本不使用依赖注入。有没有办法配置它，可能是使用Service或Factory Provider？

这些是我偶然发现的一些链接，但我不知道如何实现这样的特定案例：

为 Angular 2 中的依赖注入提供模型类的新实例

创建具有依赖关系的类的新实例，不了解工厂提供者

试图理解 intersectionObserver API 中的一个怪癖。

如果观察到的元素部分显示在屏幕上，但未达到选项中定义的阈值，我希望回调不会触发，但确实如此。试图了解为什么或如何在页面加载时阻止它。

简化测试用例： https ://codepen.io/WithAnEs/pen/gxZPMK

请注意前 2 部分是如何动画的，即使第二部分不符合 0.8 阈值（控制台日志）。第一个倾向是添加intersectionRatio > 0.8检查，但这是重复的工作。此外，比率报告会延迟，因此可能不够准确，无法通过此检查。

IntersectionObserver是相当新的实验性 API，目前并非所有浏览器都完全支持。

它将有很多用途，但目前最突出的一个是延迟加载您的图像，也就是说，如果您的网站上有很多图像。如果您使用Lighthouse审核您的网站，Google 建议您这样做。

现在，网络上有几个片段暗示了它的用法，但我认为它们都没有经过 100% 的审查。例如，我正在尝试使用这个。它在 Chrome、Firefox 和 Opera 上就像一个魅力，但在 IE 和 Edge 上不起作用。

更准确地说，代码应该识别浏览器是否支持IntersectionObserver，如果不支持，它应该立即加载所有图像而不使用 API 并写入IntersectionObserver不支持的控制台。所以，上面的代码片段没有做到这一点。

就我的调查而言，在使用 IE 11 和 Edge 15 进行测试时，他们向控制台吐出了一个他们无法识别的错误forEach，尽管他们应该支持它。

我试图填充 forEach，甚至forEach用 good old替换for，但我无法让这个片段在 IE 和 Edge 上工作。

有什么想法吗？

那么，当事件被触发时，我如何知道滚动方向呢？

在返回的对象中，我看到的最接近的可能性是与boundingClientRect保存最后滚动位置的那种交互，但我不知道处理boundingClientRect是否会导致性能问题。

是否可以使用交叉事件来确定滚动方向（上/下）？

我已经添加了这个基本片段，所以如果有人可以帮助我。
我将非常感激。

这是片段：

我想知道这一点，所以我可以在固定标题菜单上应用它来显示/隐藏它

我有交叉点观察者对象，它可以工作，但我希望它在某个元素在交叉点上方或底部超过 100 像素时通知我。

使用默认配置，一旦元素完全在视图中，它只会更改 .isIntersection 的值。但是当元素在视口上方或下方 100 像素时，我想做一些事情。

这是我的代码：

更新

感谢用户的回答，我使用了这个并且它有效：

我的目标是在用户进一步滚动到视频元素时将位置更改为视频元素。我正在使用 Intersection Observer API，因为我需要处理来自 AdForm Banner/iFrame 的页面滚动。

这是我的代码：

这是handleIntersect功能：

这是我的代码笔： https ://codepen.io/alex18min/pen/gXXYJb

它在 Chrome/Firefox/Edge 和 Android 设备上完美运行，但在 iOS 和 Safari 上一般不运行，似乎未检测到侦听器。

有人能帮我吗？先感谢您。

我有一个包含许多方形图像（相同宽度和高度）的页面，其中大小由宽度控制：50%。他们将延迟加载使用 IntersectionObserver 的 lozad.js ( https://www.npmjs.com/package/lozad )。问题是 IntersectionObserver 将计算所有图像的可见性，因为高度为 0（或未知）并且所有图像将立即加载。我想将高度设置为与宽度相同，但看不到这怎么可能！？

我正在尝试为无限滚动列表设置一个 IntersectionObserver。如果已到达列表的最后一项，我想检查 IntersectionObserver。

到目前为止，我的IntersectionObserver设置如下所示：

我的列表项呈现如下：

要获取最后一个renderDeal，我ref在交易中使用：

这适用于初始设置并触发。问题是当我想要无限滚动时，我需要继续附加到交易列表中。因此，我lastRenderedDeal不断更新以反映附加到我列表中的最后一笔交易。

这种反应并没有传递给observer.observe它看起来的方法。它只拾取我的初始元素。这似乎很明显，因为它已在mounted钩子中实例化，但我该如何处理呢？

我是否需要为交易设置观察者并再次调用observer.observe？如果是这样，我可以简单地告诉它替换最初观察到的项目吗？