问题标签 [intersection-observer]

是否可以使用 Intersection Observer API 延迟加载整个 div 标记？

我使用交叉点观察者 api 方法延迟加载图像。不知道如何为 html 元素执行此操作。

我正在尝试遵循有关 IntersectionObserver API 的各种教程，例如这个。

将示例代码添加到我的组件的 TS 文件中：

给我一个错误：

错误 TS2300：重复的标识符“观察者”。

此外，它抱怨 const myImg = document.querySelector('.animate-me');

类成员不能有 'const' 关键字.ts(1248)

我在这里想念什么？

每当显示或隐藏观察到的元素时（达到阈值点时），都会调用Intersection Observer回调函数。

那么我可以得到元素是即将消失还是即将出现？

我目前在网站主页上有全屏英雄图像幻灯片。我有一个 javascript 效果，它获取滚动位置并将其除以 1.5，然后设置图像 transformY 位置，从而产生视差效果。

这是我目前拥有的代码：

这可以按我的意愿工作，但我注意到性能是一个主要问题，特别是在支持异步滚动的浏览器上，这会导致抖动效果。

我想知道是否有更好的方法来实现这一点？完美的是拥有以下内容，但我认为仅使用 CSS 是不可能的：

我也看过 IntersectionObserver，但我不确定这会实现我想要做的。

任何想法都会有所帮助。谢谢

Intersection Observer V2 将引入新功能，以根据不透明度、z-index 和固定定位等因素检测实际可见度。

信息：https ://developers.google.com/web/updates/2019/02/intersectionobserver-v2

问题：是否有替代方法或 polyfill 来检测当前浏览器中的实际可见性？

测试：https ://jsfiddle.net/v3kgewhf/

I'm completely flummoxed by the rootMargin property of intersection observer.

My goal is to add a class to an element when half it's height has crossed the vertical center of the viewport.

In my current project, nothing I do seems to impact the "root intersection rectangle" and the class is always added immediately. I've tested in latest Chrome and Firefox.

Here's the reduced test case:

当整个元素都在视口中时，交点观察者很容易分辨出来。代码大致是这样的：

不过，我想不通的是如何翻转它，所以它不像包含，更像是覆盖。我想知道我的元素（大于视口）何时完全覆盖屏幕。

我尝试切换null及thingIWantEntirelyInView以上的位置，但没有奏效。

我还尝试在页面上添加一个位置固定height: 100vh; width: 100vw元素并检查与该元素的交集，但似乎交集观察者不适用于两个没有父子关系的元素？也许我做错了代码，但这里有一个例子：

如何使用 Intersection Observers 判断我的元素之一何时完全覆盖屏幕？

当根设置为（视口）时，我有一个IntersectionObserver观察结果非常好。但是，当我将根元素设置为另一个元素时，观察者无法检测到两者之间的交集。经过数小时的调试，我决定向社区寻求帮助。imgnullimg

代码可以在公共回购的这个文件中找到

为了能见度，我将在这里过去：

我正在做粘性标头实现 - 我不想使用position: sticky;，因为我没有看到好的 polyfill，所以我尝试使用IntersectionObserver API。问题是 - 我真的不喜欢它提供的行为，因为它的条目可能会随机延迟发出。如果您逐渐滚动，此解决方案可以正常工作，但如果您滚动得更快，标题会上升，并且只有在延迟响应之后它才会获得fixed类并以显着跳跃定位，尤其是在沉重的页面上。有什么方法可以实现更好的响应，或者 IntersectionObserver 可能不适合我的目的？

我正在使用 IntersectionObserver API。

输入特定部分时，background-color会更改。为了处理这个问题，我必须在此处 调用
的数组中获取输入条目的索引。IntersectionObserverEntryentries

我使用forEach方法来获取条目的索引，但奇怪的是它总是将索引设置为0. 但是当我通过获取的索引访问条目时，它运行良好。

结果如下...

相交 0
离开 0
离开 0 .....

我的代码有什么问题？为什么索引总是0，但通过获得的索引访问会导致正确的元素？

编辑

条目日志