问题标签 [intersection-observer]

我的页面上有一个部分，当用户滚动到该部分时，会触发一个事件。该解决方案使用IntersectionObserver非常适合我的需要。rootMargin但是，当用途已经存在时，我想调整这个观察者的大小。

现在，当有这样的观察者时，最简单的方法是：

将是分配它的属性：

但是似乎不起作用。

是否有可能以及如何更改已创建的 Intersection Observer 的行为？

我有如下所示的 html。

dataId下面是刚刚滚动的data-id。在这一点上，我想data-id接近这个元素。我采取了很多方法，不幸的是，没有一种方法奏效。

js看起来像这样：

我目前正在尝试在我的 angularjs 应用程序中使用 IntersectionObserver 实现延迟加载。

但是当我上下滚动时，它并不总是调用观察者的回调函数。

我的指令如下所示：

请参阅这支笔进行演示。

我正在尝试确定插槽元素是否具有滚动条。如果确实如此，我想在插槽旁边添加一个显示全部/显示更少的链接，这将相应地扩展或收缩它。

我正在使用 IntersectionObserver，因为它似乎是为这个用例设计的。该槽包含一个 ul ，它本身具有可变数量的 li 孩子。直到触发添加显示更多/显示链接的函数之后才会填充 ul - 因此使用 IntersectionObserver。我写的函数应该返回一个布尔值：

我所看到的是最终功能

返回未定义。我究竟做错了什么？

当水平放置元素（使用水平滚动条）并向左/向右滚动时，IntersectionObserver API 并不总是在观察到的元素进入视口时触发事件。这发生在移动设备上或在设置小尺寸响应屏幕或移动屏幕（iPhone 6/7/8 等）时在桌面 chrome 上进行测试时

有没有办法克服这个问题？谢谢

我正在尝试在可用的情况下使用 IntersectionObserver 实现图像的延迟加载，否则使用 polyfill（如此处推荐的那样）。

这种方法在我测试过的所有浏览器中都能正常工作，除了 IE。我SCRIPT5007: Unable to get property 'src' of undefined or null reference在控制台中得到一个；引发错误的行是lazyImage.src = lazyImage.dataset.src;. 但是，该行之前的 console.log 显示以下内容：

请注意：我被要求不要使用外部库或插件。任何想法为什么会发生这种情况以及如何纠正它？

我正在尝试了解 Javascript 的 IntersectionObserver。

在阅读了几篇文章和文档后，我决定自己制作一个 CodePen 来尝试：IntersectionObserver CodePen

我想在顶部消息中显示“可见的块”。CodePen“几乎”有效，但不完全有效。有时它显示正确的块，有时它没有。

这是我的 JS：

关于我做错了什么的任何想法？

我也尝试过（没有运气）类似的东西：

谢谢！

我需要检测从另一个域加载的 iframe 是否在视口中。

这在 Chromem、Firefox 和 IE 中运行良好，称为 Intersection Observer。但是，这在 Safari 中不起作用。

已经为此创建了一个 polyfill：Github 链接，并且应该也可以在 Safari 上运行。

我使用以下代码对其进行了测试：

站点 A：

站点 B：

但是我已经在 Iphone 6 上对此进行了测试，但是它会立即发出警报，并且在单击警报后它在向上和向下滚动时不再显示。

他们包含的 intersection-observer-test.html 页面返回了所有 25 个测试的通行证。

有人对此有解决方案吗？

有没有办法强制更新/运行IntersectionObserver实例？默认情况下，当视口发生更改时，将执行回调。但是我正在寻找一种在其他事件发生时执行它的方法，比如元素的变化。

一个例子：

在初始化时，一切都按预期工作。但是当你改变#red元素的位置时，什么也没有发生。

有什么办法可以使这个工作吗？唯一可行的是unobserve元素并重新启动observing它。这可能适用于单个元素，但如果 Observer 有数百个元素要观察，则不行。

如何使用 Promises 从 IMG-srcset 或 Picture-sources 加载图像？
据我所知，浏览器决定应该加载哪个 url（大小）。

如果不立即设置完整的 srcset/sources 我怎么能做到这一点 - 这使得 Promises 对我来说毫无用处？
或者这完全是我的误解？