问题标签 [resize-observer]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - 是否可以使用 resizeObserver （或类似的东西）来观察元素的顶部/左侧位置？
我试图让一个 div 绝对位于另一个的顶部。我试图覆盖的 div 可以根据用户交互更改大小和位置。
我已经使用 resizeObserver 成功匹配了大小，但下降的一个部分是如果我试图覆盖的 div 上方的页面改变高度，resizeObserver 不会触发以将覆盖的 div 移回原位 - x/y在 resizeObserver 回调中始终为 0/0。
有什么方法可以观察静态元素的 x/y 位置吗？
javascript - 我应该为删除的元素调用 ResizeObserver.unobserve 吗？
当某些观察到的元素从 DOM 中删除时，我应该调用.unobserve该元素以防止内存泄漏，还是“自动未观察到”？
为什么我要问：我正在实现一个观察许多孩子的 React 组件，并正确清理未安装组件的观察者将涉及非平凡的代码，如果它实际上是不需要的，我想避免它。
animation - 赛普拉斯等待转换完成（等待正确的宽度）
我有菜单和汉堡按钮来切换它，并想测试这种行为。但是，菜单并没有完全消失，而是在隐藏时变得更薄（只是图标可见），所以我不能只测试它是否可见，因为它总是可见。
因此，我正在通过以下方式检查尺寸invoke('width')：
但我收到错误ResizeObserver loop limit exceeded，因为它不会在单击后等待菜单转换完成。所以我只是wait(500)在之后添加click()，现在它可以工作了。但这不是小骇客吗？现在我需要为每个转换设置正确的延迟，或者总是设置一个适用于所有转换的非常长的延迟，但这是在浪费测试时间。
是否有任何简单的通用方法告诉赛普拉斯等待我的宽度达到应有的水平，而不是立即放弃？
编辑：我错了 wait() 解决方案，它并没有真正帮助。错误可能与转换无关。无需使用已接受答案中的更改代码 -invoke有效。但是这个关于忽略错误的答案的解决方案是正确的 - 关于这个错误有多个问题，忽略它是安全的。如此简短的回答 - 忽略这个例外。它可以不放在 test 中，而是放在 support/index.js 中，这样它就可以在全球范围内工作。
javascript - 角度：ResizeObserver 不适用于从 getter 设置的 innerHTML
演示链接：https ://codesandbox.io/s/lively-thunder-bi5q4?file=/src/app/app.component.ts
我正在尝试使用 ResizeObserver 来观察通过[innerHtml]绑定设置的元素
当我将 HTML 字符串放在组件类属性中时，调整大小观察器起作用
但是当我将 HTML 字符串放在组件类 getter 中时，Resize 观察者将不起作用
javascript - 如何使用 ResizeObserver 仅检查 JavaScript 中正文的宽度变化？
我想检查<body>的宽度变化（不是高度）。
有没有办法用 ResizeObserver 做到这一点？
angular - 使用 Karma 和 Jasmine 在 Angular 12 上测试 ResizeObserver 事件
我正在尝试ResizeObserver使用业力和茉莉花测试 Angular 12 应用程序中由 a 调用的代码。当我通过在浏览器上打开应用程序进行手动测试时，代码执行得非常好，但在我的单元测试中，业力似乎只是忽略了ResizeObserver. 有人知道在 karma/jasmine 测试中使用是否有一些问题ResizeObserver会阻止它正常工作吗？
应用程序描述
我已经构建了一个简单的应用程序来隔离问题。核心代码是一个组件，它只绘制一个 div 正在被ResizeObserver. 观察者在调整大小时存储新的 div 大小，并且模板在自己的 div 中显示此信息。
组件核心代码：
模板：
茉莉花/业力测试不起作用：
问题：
难道我做错了什么？该测试是否应该有效，但由于某些业力问题而无法正常工作？或者......我是否遗漏了一些明显的东西并且我的测试代码完全错误？
如果你想玩完整的代码：
代码在这个 stackblitz 中可用并工作（除了单元测试也可用但不工作）
我也试过这个（没有成功）：
和这个：
reactjs - 允许手风琴一次只打开一个
我正在用 react spring 创建一个手风琴，手风琴已经准备好并且工作正常，但是我不能让手风琴同时打开一个项目，现在同时打开所有三个项目，我希望只能打开一个。
这是代码和-> https://codesandbox.io/s/prod-sun-ttix7?file=/src/App.tsx
typescript - 在页面之间切换时，resizeObserver 没有被激活
我的问题是我使用 resizeObserver 来检测表何时更改其大小并执行函数，它在重新加载页面时可以正常工作，但是如果您更改页面并返回上一个页面，resizeObserver 会停止工作打字稿代码
HTML 元素
javascript - 访问 ResizeObserverEntry.target.scrollHeight 会导致回流吗？
我知道使用ResizeObserver，访问contentRect不会导致重排，因为它是在布局之后计算的。访问目标的scrollHeight/scrollWidth会导致回流吗？