标签[intersection-observer] - 堆栈内存溢出

检查元素是否在 window React 之外 - Check if element is outside window React

我正在尝试创建一个代码来检查 div 元素是否在 window 之外。代码的问题是它忽略了isOpen state 更新的结果，因此如果元素略微超出 window 屏幕则忽略。是否有机会进一步调整？用法：使用 Tailwind 分配 class ...

在正确的位置插入交叉观察器以避免巨大的网络负载 - Inserting an intesection observer in the right place in order to avoid an enormous network payload

我有一个来自外部 URL 的 mp3，通过<audio></audio>标签。与在移动设备上一样，在准备好播放之前需要几秒钟的时间下载，我添加了一个微调器，只有在 mp3 准备好播放时才会显示播放器 - 所以如果还没有声音，没有人会点击播放。一切正常，除了 ENORMOU ...

IntersectionObserver 使用 data-srcset 和 imagekit.io 创建延迟加载图像 - IntersectionObserver to create a lazy load Images with data-srcset and imagekit.io

我将 IntersectionObserver.js 与 data-srcset 一起使用来创建延迟加载，但每次浏览器选择最大图像时，图像都没有根据分辨率正确显示...在这种情况下，它是宽度为 450 的图像，忽略其他宽度（100px、200px、300px、400px）。这是用于延迟加载的 JS ...

IntersectionObserver 的根始终使用 getElementById null - Root for IntersectionObserver using getElementById always null

在 Angular 项目中，我想将 IntersectionObserver 的视口限制为 DOM 的特定部分。我将元素定义为具有 id 的根：在相应的组件中，我使用getElementById定义根：但是登录的根始终是null 。我做错了什么？ ...

为什么回调没有检测到 class 实例变量的最新值 - Why callback not detecting latest value of class instance variable

我有一个 web 组件，它基本上是一个 class：如您所见，我有一个路口观察器，我试图在单击锚点时禁用它的回调。观察者检测页面上的元素并更改 URL hash 以便可见元素名称在navlist上突出显示，这工作正常但会干扰 navlist 的navlist因为单击navlist条目也应该将页面 ...

观察可见性的高阶组件：React？ - Higher Order Component to observe Visibility: React?

我创建了一个高阶组件，如下所示：并像这样使用它：但是，这会将每个组件包装到我不想要的部分中。我尝试使用React.Fragment但这不允许您传递 ref 来跟踪组件。有没有更好的方法来重新创建此 HOC，以便在不将其包装在额外的 div 或部分中的情况下合并可见性跟踪？ ...

在多个元素上反应 Intersection Observer - React Intersection Observer on multiple elements

我有一个使用下面的 react-intersection-observer 的代码： https://codesandbox.io/s/multiple-observe-elements-ieoh8u?file=/src/App.js 我试图找出哪个是视图中的当前图像，当您向下滚动到同时显示Im ...

javascript | 如何在用户滚动一定量后触发事件 - javascript | how to trigger an event after the user has scrolled by some amount

我希望在用户滚动后触发一个事件，比如在另一个事件发生后 300px。简单地说，一个例子是：我希望用户先按下一个按钮，然后在他滚动一定量后按下按钮，触发一个事件，如果用户没有按下按钮，那么事件也不会触发。该按钮可能位于视口中的任何位置，例如：滚动量应相对于按下按钮的时间而不是从页面的开头开始考虑 ...

使用 Intersection Observer 时，是否可以在图像出现在页面上之前触发交叉点？ - While using an Intersection Observer, is it possible to trigger an intersection before the image is on the page?

我目前正在实施延迟加载。如果没有延迟加载，我的应用程序在显示超过 100 张图像时会出现严重的速度下降。所以解决方案是在图像源可见时更改图像源。但是，它触发有点太晚了，因为一旦图像相交，我就会加载图像。它会引起一些闪烁，并且想知道我是否可以以某种方式弄乱 rootMargin，它会在它实际 ...

Intersection Observer + CSS Scroll Snap（根据基础内容上的滚动 position 淡化修复 div） - Intersection Observer + CSS Scroll Snap (fade fix div based on scroll position on underlying content)

我正在尝试重新创建 Tesla.com 滚动捕捉/淡入淡出效果。我不得不承认我是一个完全的 JS 新手，并且不知道我在用它做什么。到目前为止，我设法让滚动捕捉工作并在固定的 div 上淡入/淡出文本。问题是我不知道如何定位和设置不在视图中的 div 的隐藏可见性。因此，这些层中的任何按钮都 ...

[React][useInfiniteQuery] 如何限制第一次获取调用仅在视图在视口中可见时发生 - [React][useInfiniteQuery] How to restrict the first fetch call to happen only when the view is visible in the viewport

我在我的组件中使用 useInfiniteQuery 挂钩无限滚动项目。我希望第一次提取仅在视图在视口中可见时发生。我正在使用 useInView/intersection observer 来查找视图在视口中是否可见。我正在使用 useInView/intersection observer ...

在 intersectionObserver 中调用 function - calling a function inside an intersectionObserver

我只想将此代码称为 IntersectionObserver 中的 function：我希望它可重复使用且更清洁，这样我就可以随处使用我的 IntersectionObserver ...

将元素滚动到视图中 - 顶部导航 - Scroll element into view - top nav

我在片段中有这段代码。这是一个路口观察者，它跟踪可见标题并将“活动”class 添加到顶部导航中相应的锚标记。我想知道 class“活动”的“li”元素是否也可以滚动到视图中。我已经尝试过 mutationObserver 但我似乎无法以任何方式使其工作。谢谢！ window.addEve ...

问题：十字路口观察员 - Animation - Question: Intersection Observer - Animation

我整个周末都在努力了解我想要实现的 animation 的 Intersection Observer Animation。根据我对路口观察者的理解，我的代码应该按我的预期工作，但事实并非如此我的目标是当元素到达视口内的某个点时滚动 animation 开始。在我的代码笔中，我标记了 anim ...

State 在交叉点观察者的回调 function 中的管理问题 - State management issue within intersectionObserver's callback function

我正在尝试使用 state 管理当前页面的索引，同时实现无限滚动。我写了上面的代码，但是useEffect运行了1次、2次、3次等，增加了1，state更新没有正确完成。如果您能告诉我如何在 intersectionObserver 的回调 function 中引用和更新最新的 state 值， ...

如何为整个 App 的特定 Svelte 组件/元素设置 Intersection Observer？ - How to set Intersection Observer for a specific Svelte component/element for whole App?

假设我在/elements文件夹中有Icon.svelte组件。我已经在整个应用程序的各种其他组件中使用了该图标组件。有没有办法为那个Icon组件设置交叉点观察者？因此，当该组件进入 Viewport 时，它会安装并在 Viewport 之外它会破坏！基本上认为这种方法可以提高应用程序的性 ...

Alpine 中具有视口边距的交叉观察器 - Intersection Observer with viewport margins in Alpine

问题：当元素进入视口的中间三分之一区域时需要执行一个动作：约束：我正在使用高山 JS 。根据Alpine intersect docs ，我可以使用.margin控制底层IntersectionObserver的rootMargin属性，以更改观察者将触发的限制。我这样做如下： h1 ...

动态 class 绑定在 Vue 中不起作用 - Dynamic class binding doesn't work in Vue

我正在使用 Vue2，并且在动态 class 绑定方面遇到了一些问题（在导航菜单栏中突出显示用户当前所在的当前部分名称）。我正在使用我初始化的 Intersection ObserverAPI，并让它从 mount() 生命钩子中循环遍历我的组件。但是，当我在观察者中更新当前部分时：（完整代 ...

Intersection Observer API：回调 function 未在交叉路口触发 - Intersection Observer API: Callback function is not triggered on intersection

有一个用于延迟加载的 Vue 自定义指令在本地注册在 Vue 3 组件中回调 function handleIntersect不会在 Intersection 上触发，当我在 DevTools 中检查图像时，图像始终具有带有图像 url 的 data-src 但是，当我在指令中取消注释调用loa ...

多个元素的相同 IntersectionObserver - 如何使用 classList.add() 正确定位相交元素 - Same IntersectionObserver for mutiple elements - how to properly target intersected element with classList.add()

我正在使用 Ziyad 和 Ruslan Korkin 提供的出色代码，但是当我想在 entry.target 上使用 Classlist 时，我卡住了...... classList.add 或 classList.remove 无法按预期工作。在此代码中元素相交的部分中，如何正确定位一个相交元 ...