如何知道IntersectionObserver的滚动方向？
那么，当触发事件时，如何知道滚动的方向呢？ 在返回的对象中，我看到最接近的可能性是与 boundingClientRect 交互，保存最后的滚动位置，但我不知道处理 boundingClientRect 是否会导致性能问题。 是否可以使用交叉事件来确定滚动方向（向上/向下）？ 我添加了这...
浏览器加载时立即触发IntersectionObserver回调函数
我对IntersectionObserver API非常陌生，并且我一直在试验这段代码：let target = document.querySelector('.lazy-load'); let options = { root: null, rootMargin: '0p...
测试使用IntersectionObserver的代码
我在应用程序中有一个JavaScript组件，处理无限滚动分页，并试图重写它以使用IntersectionObserver，如此处所述，但是在测试时遇到了问题。 有没有一种方法可以在QUnit测试中驱动观察器的行为，例如使用在我的测试中描述的某些条目触发观察器回调函数？ 我想到的一个可能的...
当我快速滚动时，Intersection Observer 有时会失败
我在使用 Intersection Observer API 时遇到了一些问题，它对我来说效果不错，但是... 当我在网页上快速滚动（非常快）时，Intersection Observer API 有时会无法检测到元素出现在视口中。 当我慢/正常滚动时，它对所有元素都有效 观察者选项： ...
多个HTML元素使用同一个交叉观察器
我希望当一些文本项目停止与深色背景重叠时，它们会随着用户滚动而逐个更改颜色。 所有文本项目均为position: fixed 编辑：MDN文档说（重点是我的）： Intersection Observer API提供了一种异步观察目标元素与祖先元素交集变化的方法 我认为这意味着没有办法解决...
使用react-intersection-observer测试React组件的Jest
我正在尝试测试一个组件，该组件有一个包含react-intersection-observer的子组件，但我总是收到错误提示。 我尝试导入库，但仍然失败。这是最初的测试。 beforeEach(() => { testContainer = document.crea...
强制更新IntersectionObserver
有没有办法强制更新/运行一个IntersectionObserver实例？回调函数默认情况下将在视口发生更改时执行。但我正在寻找一种在发生其他事件（如元素更改）时执行它的方法。 示例： 初始化时一切正常。但是当您更改#red元素的位置时，什么也不会发生。 // elements l...
当元素已经在视口中时，触发IntersectionObserver。
IntersectionObserver会在元素在视口中可见度达到一定程度（0-100%）时被触发。这意味着，当元素已经完全出现在视口中时，因为阈值没有变化，所以不会再次触发。 我有一个高度为200vh的元素，我希望当我滚动超过这个元素时，IntersectionObserver会触发。所以...
当元素离开视口时使用Intersection Observer
有没有办法使用Intersection Observers检测元素是否离开了视口？例如，我在屏幕上有一个元素，当该元素的顶部与视口的顶部相遇时，我想触发回调。来自MDN的说明： “Intersection Observer API允许代码注册一个回调函数，每当他们希望监视的元素进入或退出另一...
如何观察DOM元素位置的变化
我需要观察一个DOM元素的位置，因为我需要显示一个弹出面板与之相关（但不在同一个容器中），并且该面板应该跟随该元素移动。我该如何实现这样的逻辑？下面是代码片段，你可以看到外部和嵌套的弹出面板的开启方式，但它们不会跟随水平滚动。我希望它们都能跟随滚动，并继续显示在对应图标附近（而且应该是通用的方...