问题标签 [intersection-observer]

每当一个部分部分可见或部分不可见时，我都会尝试激活和停用导航栏项目的类。如果我完全向下或向上滚动页面，代码可以正常工作。问题是如果我在一个部分的中间改变方向。

似乎该部分需要首先 100% 不在视野范围内，然后才能重新进入视野才能激活或停用课程（我相信会发生这种情况，因为我们正在检查是否entry.isIntersecting为真，并且首先需要将其更改为错误的）。尽管如此，这会导致不希望的行为。

我试过摆弄 if 语句来检查entry.intersectionRatio，但我似乎也无法让它工作。为了以防万一，我也尝试过不同的浏览器，但行为仍然相同。

我该如何解决这个问题？

这是一些显示这种“错误”行为的代码。它看起来像这样：

代码笔来自这篇文章。

提前致谢。

我有一个创建 iFrame 的应用程序，在该 iFrame 中我需要观察元素是否可见。

IE 或 Safari 不支持 IntersectionObserver，所以我不得不使用 polyfill：https ://github.com/w3c/IntersectionObserver/tree/master/polyfill

像大多数事情一样，最好将其描述为图像：

注意上面的“观察到：0”，这是intersectionRatio. 在具有本机实现的浏览器中，这会报告可见元素的比例。在图像的当前状态下它会报告1。

这是我对可观察对象及其选项所做的小片段：

这是完整的来源：https ://github.com/Kikketer/ieframe-observe/blob/w3c-polyfill/index.html

你可以在这里演示：http://htmlpreview.github.io/?https: //raw.githubusercontent.com/Kikketer/ieframe-observe/w3c-polyfill/index.html

我担心我只需要为我拥有的元素编写某种自定义观察者，但我感觉我写的东西看起来有点像 polyfill。

有没有人遇到过这样的情况？polyfill 有什么我缺少的吗？

我研究了很多，无法解决这个问题。仅出现在 Safari（Mac 和 iOS）上。适用于 Chrome、FF、Edge 等。

更新：闪烁也发生在 FireFox 中......

我正在使用 IntersectionObserver API 以及所需的 polyfil 来延迟加载图像。当它们进入视野时，交叉点观察者将低分辨率图像集替换为 div，background-image并将其替换为存储在 div 上的数据属性中的高分辨率图像。

当设置了模糊的初始图像时，行为正在“工作”，然后被高质量的图像替换，但中间发生了白色闪烁或闪光......（页面的背景是白色的，所以也许这就是显示的内容？ )

经过一番阅读：（如何防止背景图像在更改时闪烁）我确实通过使用构造函数预加载图像来解决跳跃问题new Image()。

一个示例 HTML 元素 (PHP)：

我试过玩，backface-visibility: hidden但没有运气。我没有为任何东西制作动画，只是用预加载的全尺寸图像替换srcon 。div

我正在尝试构建一个交叉点观察器，允许我的 UI 在包含在容器选项中的第一个或最后一个框到达容器边界时停止滑动过渡。因此，幻灯片总是充满了框选项，它允许从左到右的流畅体验。

沙箱可能很有用，所以这里是我的沙箱

一些模式也可能很方便，所以在这里：

但是正如您将看到的那样，它不会顺利停止，但是我已经有效地设置了我的观察者使其停止，就像我在模式中描述的那样，

任何提示都会很棒，谢谢

Intersection Observer 中的阈值选项似乎不起作用。

为了提供更多上下文，我的列表项在视口中呈现，我希望每个项目都在视口的 Intersection 观察者上观察。问题是，我需要以 25% 的步长观察它们。当他们进入视口和/或离开视口时。

根据文档，似乎提供阈值数组[0, 0.25, 0.50. 0.75, 1]应该可以完成工作，但实际上它与给它的值为 0 或 1 没有任何区别。我想观察每次元素的交点增加或减少 25% 时的变化我的滚动视图。

你可以检查我的代码 - https://codesandbox.io/s/rm46m1qy7o

我在 Windows 10 上使用 chrome v72。

我有一些固定高度的图像要延迟加载。这些图像被包装在一个组件中，<LazyLoad />该组件提供了一个交叉点观察器。在主页中，我使用了其中的一些<LazyLoad />组件。然而，虽然我有 6 个这样的组件并且只有一个（第一个）似乎与视口相交，但实际上前 4 个图像已经加载，所以只有最后两个被延迟加载。如何让观察者按我的预期工作？

代码在这个沙箱中。

我有一个固定的页脚，它在触发滚动事件时展开，并在最后一次滚动或移动 1500 毫秒后缩小。

下面是生产脚本的简化版本，我在其中使用 lodash 节流阀并在销毁组件时删除事件侦听器。

我刚开始使用交叉点观察器，我想知道如何实现相同的行为，因为它是一个固定元素，没有交叉点，我能想到的唯一方法是创建一个“哨兵”元素并更改其位置每个路口，这似乎是一种矫枉过正，违背了包括路口观察者“性能”的主要目的

所以没有明确的想法，我转向你们和你们的专业知识。

我正在尝试观察视口中心的交点，我尝试在 rootMargin 中传递负值

但它似乎不能正常工作。

我的要求是当我的元素到达屏幕中心时观察交叉点。

我正在尝试这样做，以便当某些文本项停止与深色背景重叠时，它们将在用户滚动时逐个更改颜色。所有的文本项都是position: fixed

编辑：MDN 文档说（强调我的）：

Intersection Observer API 提供了一种异步观察目标元素与祖先 元素的交集变化的方法

我认为这意味着无法解决我的问题，因为我要监视重叠的元素不是root我在选项对象中指定的子元素。

如果重叠元素不是另一个元素的子元素，有什么方法可以检测重叠？

没有任何控制台错误，但代码没有做任何事情。

可new IntersectionObserver()用于检测用户是否在页面顶部（scrollY = 0）VS。当 scrollY > 0 （用户向下滚动）？

因为我试过这个并且无法让它工作：