问题标签 [intersection-observer]

在单页应用程序中，元素经常被删除和替换。在从 DOM 中删除的元素上，可能有一个 IntersectionObserver（或任何其他类型）

对于我从不关心的事件，因为它们是在目标上绑定和触发的，所以它们应该是无害的。对于 IntersectionObserver，我有点担心所有实例都会检查任何视图更改。

考虑我的 Lazy.ts 的以下部分

底部（mutationOberserver）是否无用？由于对document.body.

通常我会假设垃圾收集会很好地完成它的工作，但是脚本会保留对所有附加元素的引用数组。并且该阵列不会被清理（并且没有观察者就无法清理）

- 编辑 -

它不会被“删除”（或至少不会在 10 秒内）https://jsfiddle.net/c1sgdcrd/所以，问题仍然存在，最好将它保存在内存中还是积极使用 MutationObserver 并断开它。

我正在观察消息并使用消息时间戳跟踪这些观察结果。这些观察有一个重要条件：如果页面上没有客户端活动（光标没有移动，或者他没有输入任何内容），则不应更新跟踪时间戳。客户经常收到一条新消息，但没有任何活动。这意味着一旦完全观察到该元素，Observer 就会跳过该元素。但是当用户实际提供一些活动时，该元素不会被重新观察，这意味着除非比率发生变化，否则永远不会再次调用观察者回调。我如何告诉 IS 重新计算所有观察结果以触发我的回调？

手动“重新观察”元素的问题是，如果元素已经在交集范围内，则永远不会调用回调。

一些伪代码例如：

我如何将额外的参数传递给 IntersectionObserver？我正在尝试为 Vue 创建一个延迟加载插件。它像这样工作得很好，但我也希望能够调用提供的指令函数。

这意味着在插入的函数中，我将设置binding为第二个参数。

我将如何传递这个绑定，以便我可以在我的 IntersectionObserver 回调中使用它？

最后它应该看起来像这样：

我有一个 div，我想在它滚动到视口时更改颜色，我正在尝试使用新intersectionObserver方法来实现这一点。我已经在配置回调中设置了我的参数，但我似乎无法让观察者本身添加类来更改背景颜色？

任何帮助都会很棒。

代码笔： https ://codepen.io/emilychews/pen/mXVBVK

有没有办法将内置的 javascript 方法存储在变量中，以便在某些浏览器中不提供此方法时设置不同的行为？

我的具体情况是针对 Safari 或旧版 MS 浏览器中不可用的 intersectionObserver。我有一些由此触发的动画，如果intersectionObserver 不可用，我想关闭它们。

我想要做的基本上是：

我真的不想为一个功能加载 polyfill 或库吗？

非常感谢

艾米丽

如果我将该threshold值配置为大于 0的值，isIntersecting则在目标离开视口时永远不会返回 false。但是，如果我将默认阈值保留为 0，isIntersecting则当目标退出视口时将返回 false。请参阅下面的示例并删除threshold: 1.0.

https://jsfiddle.net/snewcomer24/get0a4xr/1/

这似乎是不同的行为。有人对这种行为有解释吗？

我在一个盒子上有一个intersectionObserver，当它进入视口时会改变颜色，一切正常。

不过，我正在尝试将其应用于多个框，当我将其更改getElementsById为querySelectorAll（JS 的第 13 行）时，它不会打球。

有谁知道我在这里做错了什么？我认为问题不在于intersectionObserver，我认为问题在于选择器。它快把我逼疯了。

代码笔： https ://codepen.io/emilychews/pen/RMWRPZ

我遇到两种情况，当我滚动到某个部分时会自动选择导航栏项目。我该如何做到这一点？我正在寻找一个 2018 年最新且尽可能简单的解决方案（vanilla JS 或没有使用 bootstrap 的额外 JS）。我发现了几篇关于使用 jquery 来做到这一点的帖子，但看起来交叉点观察者是更好的方法？

一个例子是https://insights.stackoverflow.com/survey/2018/，另一个例子是http://getbootstrap.com/docs/3.3/javascript/#dropdowns。

假设我有以下 html

我正在尝试通过交叉点观察者调用回调。

我希望它target成为style: "position: fixed"并通过 style.top.

我还指定了作为目标祖先的根元素style: "position: relative"。

但是当目标和观察者相交时，不会触发回调函数。

我错过了一些限制吗？

这是我输入的内容：

这是一个codepen演示： codepen demo

您可以单击页面中的任意位置开始移动ccc块。

我希望在特定 DOM 节点进入视口时调用回调。

另外我有以下情况：

• aFarkas/lazysizes在页面上使用。
• Intersection Observer API在一些需要支持的浏览器中没有实现。

我不想添加一个捆绑了相同功能的产品Intersection Observer Polyfill。aFarkas/lazysizes

因此我的问题是：是否可以aFarkas/lazysizes用来检测 DOM 节点何时进入视口？