问题标签 [intersection-observer]

尝试使用最新的 React 的 react-intersection-observer。

我正在尝试使用文档为交叉计算引擎options设置一个新的。root问题是，它拒绝了我的新根

我将我在祖先 React 组件中创建的 React ref 交给它，并通过 props 将其传递给它，并将<IntersectionVisible>元素中的 props 设置为：

这是我收到这个警告吗？

我正在将广告延迟加载到我的网站中，并且只有当用户向下滚动足够远时才能显示它，但是当用户向上滚动时，div 就会消失。我希望这样当用户第一次看到 div 时，即使他滚动离开，广告也会出现并停留在那里。我也不希望广告令人耳目一新。我的代码是：

我试图更改我网站上的汉堡菜单，每次它位于具有浅色背景的部分顶部以提高可见度。我尝试使用交叉点观察器，该解决方案似乎有效，但是它在滚动时触发得太早，实际上该部分与菜单相交之前。

我是十字路口观察者的新手，我试图在网上找到一些有用的东西，但运气不佳。

这是我的问题示例的 jsfiddle：

https://jsfiddle.net/bc7w8zt1/

任何人都可以阐明它吗？

我只想在用户看到它或图像元素在用户视口中可见时才呈现我的图像。我已经尝试过了，但是只有当我已经传递了所有图像元素时才会渲染图像，而不是在滚动时一一呈现。

我创建了一个自定义指令并将其放在我的父 div 上。

这是我使用 Vue 指令的交叉点观察器：

这是我的 Vue 组件：

最后，只有当我已经看到它或与它相交时（当我在页面底部时），这六个图像才会同时加载。我如何才能在滚动通过后一张一张地加载我的图像？

背景

我在我的 React 应用程序中使用 Intersection Observer 来跟踪我在滚动页面时所处的类别。我想观察离菜单栏最近的 div。

让它更精确

为了更好地可视化这一点，我录制了一个小屏幕录像。您可以看到它在“Signature”和“Baser”之间切换，不是随机的，但不是我希望它切换的方式。当 div 几乎与菜单栏对齐时，我希望它切换到菜单栏中的其他项目。

我的录屏：https ://www.youtube.com/watch?v=ZF8qbLAQhWQ

如何处理性能

由于我使用的是 React，所以当我滚动页面时想要更新活动菜单项时，我将更新一个状态。为此，我正在使用他们的新钩子 API。

我创建了一个函数，为要观察的每个 div 创建一个 ref，它将由 length 的menuProductCategories长度确定：

在我的 JSX 中，我给每个 div 一个 ref 和一个 id：

在我的 PC 上执行此操作时效果很好，但在移动设备上，当我快速滚动页面时它会滞后。

这些是我面临的问题，我希望得到一些指导。我也希望我的描述性足够，否则，请告诉我。

谢谢！

当粘性位置条件匹配时，我想向元素添加一个特定的类。我正在使用 Intersection Observation API 来检查元素何时获得它的粘性位置。代码在除 IE11 之外的所有浏览器中运行良好。我为 IE 的 Intersection Observation API 添加了 polyfill。

这是上述场景的小提琴。

谢谢

以下是我试图了解交叉点观察者的示例：

即使目标元素与源元素不相交，我也不明白为什么这会在组件安装时触发。

IntersectionObserver当元素进入视口时，我正在使用向元素添加和删除类。

而不是说“当 X% 的元素可见时 - 添加此类”我想说“当 X% 的元素可见或当 X% 的视口被元素覆盖时 - 添加此类”。

我假设这是不可能的？如果是这样，我认为这有点缺陷，IntersectionObserver因为如果你有一个比视口高 10 倍的元素，除非你将阈值设置为 10% 或更低，否则它永远不会被视为可见。当你有可变高度元素时，特别是在响应式设计中，你必须将阈值设置为 0.1% 之类的东西，以“确定”元素将接收类（但你永远无法真正确定）。

编辑：回应摩西的回复。

Edit2：更新了几个阈值以强制它更频繁地计算 percentOfViewport。还是不理想。

小提琴最新

我用这种方法开始了这个问题scroll event，但由于建议使用IntersectionObserver似乎更好的方法，我试图让它以这种方式工作。

目标是什么：

我想根据当前/通过查找（我在想？）观察到的内容来更改样式（ color+ background-color），或者将覆盖默认样式（白底黑字）。headerdivsectionclassdataheader

标题样式：

font-color：

根据内容（div/ section），默认值header应该能够将其更改font-color为仅两种可能的颜色：

• 黑色的
• 白色的

background-color：

根据内容，background-color可能有无限的颜色或透明，所以最好单独解决，这些可能是最常用的背景颜色：

• 白色（默认）
• 黑色的
• 无颜色（透明）

CSS：

具有默认标题的 Div/section 示例内容没有变化：

div/section 示例更改内容的标题：

路口观察者方法：

我尝试在我的 Angular 7 应用程序中使用 Intersection Observable 延迟加载图像。我从 ngAfterViewInit 生命周期钩子中调用了 Intersection Observable。但是当我加载应用程序时，回调被调用了两次，一次是所有 isIntersecting 值都为 true，下一次是正确的 isIntersecting 值。我对这种行为感到困惑。

https://stackblitz.com/edit/angular-wqbuyr

更新：现在完美地调用了交叉点观察器，但现在出现了问题。由于我们使用返回静态节点列表的 document.querySelectorAll，因此一旦更新数组，节点列表就不会更新。如果我尝试使用 document.getElementsByClassName，则会引发错误，因为它不是节点列表？？？