问题标签 [intersection-observer]

我们都知道headroom.js，这是一个很好的小部件，用于在向下/向上滚动时显示/隐藏标题。我会使用这个小部件，但我的用例略有不同。

我现在正在尝试使用 IntersectionObserver 构建它。我的根元素是null，所以它指的是完整的文档。

我的 handleIntersect() 函数调用 sticky() 如下所示：

函数sticky() 被正确执行。但是，观察者仅触发 1 次。

每次向上或向下滚动时，我该怎么做才能让观察者调用？

IntersectionObserver 是这里的正确选择吗？什么是芳香和透明的替代品？目标是根据滚动方向显示或隐藏任何元素。

我正在尝试设置一个交叉点观察器，它在我的页面上查找具有 data-original-bg 的元素并将其分配为背景图像 url 样式，以便后加载图像。

我在我的 React 组件中编写了一个函数并将其加载到 ComponentDid Mount 中，但我收到错误“无法分配给不是引用的右值” - 在线
return target.hasAttribute('data-original-bg') ? target.getAttribute('style') += 'background-image:' + backgroundImage : target.getAttribute('style') += 'background-image:' + backgroundImage

我的职能：

这与交叉点观察器不适用于具有位置的目标：固定

但我的问题是，交互观察者不会在具有位置的元素上触发：绝对。我有 jQuery UI 对话框，当它出现时观察者不会触发。

这是我的代码：

没有 jQuery UI

任何人都知道问题是什么以及为什么它不触发？

我正在使用 Intersection Observer API 来帮助我实现视差效果。到目前为止，除了一种情况外，一切都运行良好：

当图像已经可见且位于页面中间时，只要图像不与视口边缘相交，就不会触发回调。因此，我无法使用从回调接收到的 boundingClientRect 更新视差平移的位置。

即使图像完全可见并且不与任何东西相交，Intersection Observer API 是否有办法进行回调？

使用IntersectionObserver API，我如何找出特定元素何时在视口之外？

一旦用户滚动过标题，并且标题因此不再位于视口内，我需要输出控制台日志。我想使用IntersectionObserver而不是滚动事件侦听器来最小化负载，因为它是异步工​​作的。我到目前为止的代码是：

此代码不输出任何控制台日志。PS：我的<header>元素的 ID 为header.

我想不出更好的标题，但情况就是这样：

我想在交叉点观察器中观察两个不同的元素。页面上有一个元素

我的代码起初如下所示：

我的期望是它会同时观看，无论一个是交叉路口，它都会添加一个类。事实并非如此。我有：

未捕获的类型错误：无法在“IntersectionObserver”上执行“观察”：参数 1 不是“元素”类型。

我不知道这是什么意思。什么是“参数 1”？

让我思考的部分：

不是“元素”类型。

我试过这个：

我认为首先检查它们是否存在，但我仍然得到同样的错误。

您可以在不同的元素上运行多个observe()功能，或者这不是它的工作原理吗？

编辑

正如评论者和我自己所指出的，这似乎与 DOM 中不存在的元素有关，这是有道理的。

也不行。

为什么？

我正在将我的项目从 Ionic 3 迁移到 Ionic 4，但我注意到在 Ionic 3 中运行的自动播放视频功能不再在 Ionic 4 中运行。

据我所知ContentChildren，尽管视图中存在视频，但我并没有被填充。我也尝试过使用forwardRef，但这并没有做任何事情。

我检查了与此类似的其他问题，提供的解决方案都没有为我工作，而且大多数都是低质量的答案，所以考虑到他们被问到已经过去的时间，我不认为这是重复的。

我正在使用的重要包是：Angular: 7.2.15、@ionic/angular 4.4.0、zone.js 0.8.29、intersection-observer 0.7.0。

这是自动播放组件

自动播放指令非常简单。

自动播放组件被包裹的组件也是如此。这就是所谓的inline-video

我不确定为什么这在 Ionic 4 中不起作用，但在 ionic 3 中起作用......所以任何帮助将不胜感激。

组件的层次结构如下：

Feed Page > Feed Item > Autoplay > Inline Video. autoplay组件包裹在组件周围的位置inline video。

编辑：我在 config.xml 中也设置了 AllowInlineMediaPlayback 首选项

<preference name="AllowInlineMediaPlayback" value="true" />

相同的网站子页面。iphone X 和 iphone 7 之间的 RAM 使用差异超过 10 倍。（X 约 900MB，7 约 90MB）。当我加载我的 Angular 6 应用程序的路线时，我使用 IntersectionObserver 延迟加载一些图像，RAM 只是在 X 上爆炸，并且在使用该页面几分钟后它崩溃（safari 没有响应，chrome 显示'oh snap'页面。iOS 12.3 在两个设备上。
有谁知道可能导致问题的原因。

我有一个问题，当用户滚动到页面底部时，我需要获取数据。为了解决这个问题，我使用intersection Observer. 它适用于 Chrome、Firefox、Opera 和 Safari，但它在 Edge 中不起作用，原因我不明白（而且也没有错误）。

这就是它应该是的

这是 Edge（否Loading...）

• 我将console.log放在handleObserver函数内部（内部if (this.state.prevY > y) {}语句）->在Edge中它没有触发

• 而且我试图通过 id 而不是引用目标this.loadingRef- 结果是相同的。

这是我的反应组件：

根据 MS Edge 中的建议：IntersectionObserver。对你起作用吗？我尝试添加最小宽度、最小高度和边框——>它对我不起作用

我需要在基于IntersectionObserver API返回的元素相交时触发动画的网页上显示多个动画计数器。

我观察到的是，尽管 API 在大多数情况下对所有计数器都返回 true，但只有第一个动画被执行，而对于其余的动画，我需要向上/向下滚动页面以使其余的计数器产生动画。

即使我只需要用数据属性中的值替换内部文本（这样做是为了验证动画脚本不是罪魁祸首），这种不一致的行为仍然成立。

下面是单个网页上 3 个计数器的代码和屏幕截图，即使所有三个计数器都在屏幕的第一折内，只有第一个可以工作。

HTML：

JS：

如果您以前遇到过这样的问题，有什么建议吗？