个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
目标:
我想对一组在页面加载时相交的元素执行一个操作，并单独处理所有其他元素(当前未相交)。
问题:
每个观察者都有自己的回调，我无法同步获得一组结果。
可能的解决方案:
如果最初可以询问相交观察者元素是否相交。据我所知，没有这样的功能，所以每一个想法或帮助将不胜感激。
最佳答案
IntersectionObserver 类上实际上有一个方法可以帮助您实现目标。它是 IntersectionObserver.takeRecords() .它返回经历交集变化的观察条目数组。
此方法还强制 IntersectionObserver 检查和更新交叉点，因此从此函数返回的条目将包含最新的交叉点比率。
进一步阅读:here
关于javascript - 如何使用 IntersectionObserver 初步检查元素是否相交，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63523778/
25
4
0
电梯导航也被称为锚点导航，当点击锚点元素时，页面内相应标记的元素滚动到视口。而且页面内元素滚动时相应锚点也会高亮。电梯导航一般把锚点放在左右两侧，类似电梯一样。常见的电梯导航效果如下，比如一些官方文档
我正在使用IntersectionObserver polyfill在图 block 上延迟加载图像。问题是我有几千个图 block ，每个图 block 上都有一个需要延迟加载的图像。 以前，我使用
我有一个包含许多方形图像(相同宽度和高度)的页面，其中大小由 width:50% 控制。他们将延迟加载使用 IntersectionObserver 的 lozad.js ( https://www.
在单页应用程序中，元素经常被删除和替换。在从 DOM 中移除的元素上可能有一个 IntersectionObserver(或任何其他类型) 对于我从不关心的事件，因为它们是在目标上绑定(bind)和触
我如何将额外的参数传递给 IntersectionObserver？我正在尝试为 Vue 创建一个 lazyload 插件。它像这样工作正常，但我也希望能够调用提供的指令函数。 const lazyl
我创建了一个用户界面，当用户向下滚动页面时，会出现 4 个带有“淡入”效果的网格框，但是当我们向上滚动页面时，再次向下滚动页面时，动画再次出现，而准确地说，我不想让动画做多次，而只是在盒子出现一次时。
我想为具有以下属性的元素创建动画: 它在 时为元素设置动画它进入视口(viewport) 如果元素离开视口(viewport)然后再次进入它应该是再次动画 根据滚动方向/相交边(从顶部或底部)，动画应
目标: 我想对一组在页面加载时相交的元素执行一个操作，并单独处理所有其他元素(当前未相交)。 问题: 每个观察者都有自己的回调，我无法同步获得一组结果。 可能的解决方案: 如果最初可以询问相交观察者元
我正在尝试构建我的 gatsby 项目，但由于 IntersectionObserver 未被识别，我无法构建。我在 InView 组件中使用了intersectionObserver: import
我有一个 div，我想在它滚动到视口(viewport)时更改颜色，我正在尝试使用新的 intersectionObserver 来实现这一点方法。我已经在配置回调中设置了我的参数，但我似乎无法让观察
我有以下方法: componentDidLoad() { this.image = this.element.shadowRoot.querySelector('.lazy-i
我正在使用 IntersectionObserver在元素进入视口(viewport)时向元素添加和删除类。 而不是说“当 X% 的元素可见时 - 添加此类”我想说“当 X% 的元素可见或当 X% 的
当目标元素距离交叉点根 100px 时，我想拦截一个交叉点 为了做到这一点，我将 rootMargin 设置为“100px 0px 100px 0px”。 在这个例子中，当目标元素的第一个像素(红色框
有什么方法可以强制更新/运行 IntersectionObserver实例？默认情况下，当视口(viewport)发生更改时，将执行回调。但是我正在寻找一种在其他事件发生时执行它的方法，比如元素的变化
设置rootMargin的代码如下所示。 let observerOptions = { root: null, rootMargin: "100px", threshold:
我正在尝试编写一个测试，当元素在视口(viewport)中时断言某些内容。 我正在使用 IntersectionObserver API，事实证明，对观察者的调用是在浏览器可以进行时完成的。 所以问题
我正在观察消息并使用消息时间戳来跟踪这些观察结果。这些观察有一个重要条件:如果页面上没有客户端事件(光标不移动，或者他没有输入任何内容)，则跟踪时间戳不应更新。客户端经常收到新消息，但没有任何事件。这
我有一个 IntersectionObserver 观察一个 img，当根设置为 null(视口(viewport))时它工作得很好。但是，当我将根元素设置为另一个 img 元素时，观察者无法检测到两
试图理解 intersectionObserver API 中的一个怪癖。 如果观察到的元素部分出现在屏幕上但未达到选项中定义的阈值，我希望回调不会触发，但它确实。试图了解为什么或如何在页面加载时阻止
我正在尝试为无限滚动列表设置一个 IntersectionObserver。我想检查 IntersectionObserver 是否已到达列表的最后一项。 到目前为止，我的 IntersectionO
我是一名优秀的程序员,十分优秀！