是否有任何非轮询方式来检测DOM元素的大小或位置何时发生变化？ [英] Is there any non-polling way to detect when a DOM element's size or position have changed?

问题描述

长期以来，我一直在寻找一种方法来检测DOM元素的大小或位置何时发生变化。这可能是因为窗口调整大小，或者因为新元素被添加到元素中，或者因为新元素被添加到该元素周围，或者因为CSS规则已经改变，或者因为用户已经改变了浏览器的字体大小。元素的大小或位置会改变的原因有很多。

For a long time, I've been looking for a way to detect when a DOM element's size or position has changed. It could be because the window resized, or because new child elements were added to the element, or because new elements were added around this element, or because CSS rules have changed, or because the user has changed their browser's font size. There are a huge number of reasons that an element's size or position would change.

我可以为许多这些事件挂钩事件处理程序，但我认为有些情况是不覆盖我曾经希望使用MutationObservers来观察该元素的offsetWidth或clientWidth，但它看起来像仅适用于DOM属性，而不是Node属性（或者也就是Webkit所实现的）。所以，要真正防弹，看起来我需要运行轮询循环。

I could hook event handlers for many of those events, but I think there are cases that aren't covered. I had hoped to use MutationObservers to just watch the element's offsetWidth or clientWidth, but it looks like those only apply to DOM attributes, not Node properties (or maybe that's just what Webkit implements). So, to be truly bulletproof, it looks like I would need to run a polling loop anyway.

这是正确的吗？我错过了一些重要的事情吗？轮询唯一的防弹方式来检测元素的大小或位置何时发生变化？

Is this correct? Have I missed something important? Is polling the only bulletproof way to detect when an element's size or position has changed?

修改

为了给一点更多的上下文，这不是任何一个特定的用例。对我来说，这是一次次的。在目前的情况下，我希望通过CSS设置一个画布，使其宽度和高度为100％。我想要一个脚本调整其宽度和高度属性，当其offsetWidth或clientWidth改变（这是针对WebGL，其中width和height属性影响framebuffer分辨率）。在另一个项目中，我想要一个元素在高度上展开，以填补用户浏览器窗口中的剩余空间。我一次次遇到这种情况，不可避免地，解决方案似乎是：

To give a little more context, this isn't tied to any one particular use case. For me, it has come up time and time again. In my current situation, I was hoping to have a canvas that is set, via CSS, to be 100% width and height of its parent. I want a script to adjust the canvas's width and height properties when its offsetWidth or clientWidth changed (this is for WebGL, where the width and height properties affect the framebuffer resolution). In another project, I wanted to have an element expand in height to fill whatever remaining space was in the user's browser window. I have come across this situation time and time again and, inevitably, the solution seems to be:

1. 听window.resize


2. 挂接到您编写的任何可能会更改DOM的代码（或可能使用Mutation Events或Mutation Observers）


3. 定期进行轮询操作以清理任何错过的案例

（大多数人停留在1，也许做一点2）

(most people stop at 1, and maybe do a little of 2)

我只是想确保我没有丢失重要的东西。

I just wanted to make sure I wasn't missing something vital.

顺便说一句，在我的WebGL情况下，收听window.resize是足够的（和有些优点，因为那时画布尺寸和渲染分辨率同时改变）。

Incidentally, in my WebGL situation, listening to window.resize is sufficient (and is somewhat preferable, because then the canvas dimensions and rendering resolution change at the same time).

推荐答案

同事指着我一个技术，使用 underflow 和 overflow 事件。我没有尝试过，我不知道有什么样的浏览器支持（看起来像Chrome和FireFox，它应该在IE中工作，通过合成浏览器将要查找的相同的事件，但我不知道哪些版本支持技术）。

A co-worker pointed me to a technique that uses the underflow and overflow events. I haven't tried it, and I have no idea what kind of browser support there is (looks like Chrome and FireFox, and it should work in IE by synthesizing the same events that browser would look for, but I have no idea which versions support the technique).

这篇关于是否有任何非轮询方式来检测DOM元素的大小或位置何时发生变化？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！