“intersection-observer”的相关标签问题

0 投票

0 回答

565 浏览

javascript - 使用带有 IntersectionObserver 的纯 javascript 在向下/向上滚动时隐藏/显示标题

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

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

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

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

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

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

javascript intersection-observer

0 投票

2 回答

84 浏览

javascript - Intersection Observer - 不能分配给不是参考的右值

我正在尝试设置一个交叉点观察器，它在我的页面上查找具有 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

我的职能：

0 投票

1 回答

1540 浏览

javascript - Intersection Observer 不适用于 jQuery UI 对话框

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

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

这是我的代码：

没有 jQuery UI

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

javascript jquery jquery-ui-dialog intersection-observer

0 投票

1 回答

966 浏览

javascript - 当元素相交时，如何在每个像素处获得 Intersection Observer 回调触发器？

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

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

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

javascript intersection-observer

0 投票

1 回答

2798 浏览

javascript - IntersectionObserver：找出元素何时在视口之外

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

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

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

javascript intersection-observer

0 投票

0 回答

718 浏览

javascript - 两个单独的 observe() 函数观察两个不同的元素不观察它们

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

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

我的代码起初如下所示：

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

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

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

让我思考的部分：

不是“元素”类型。

我试过这个：

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

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

编辑

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

也不行。

为什么？

javascript ecmascript-6 intersection-observer

0 投票

0 回答

267 浏览

javascript - ContentChildren 始终为空，因此不会调用交叉点观察者

我正在将我的项目从 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" />

javascript angular typescript ionic-framework intersection-observer

0 投票

0 回答

56 浏览

iphone - Iphone X 吃掉了内存，而 iphone 7 在页面上的 Angular 应用程序上与 intersectionObserver 正常工作

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

iphone angular intersection-observer

0 投票

0 回答

405 浏览