javascript - ResizeObserver 在垂直或水平调整浏览器大小时保持数组结构

Question

我可能会忽略一些小细节，但我正在努力使用 ResizeObserver 获取多个 div 的高度值。

描述我的问题的 Gif：

我有一种情况（React env），当我水平调整浏览器窗口的大小时，我的childdiv 返回数组中的高度，例如：

(3) [100, 120, 110]
(3) [100, 110, 100]
(3) [100, 100, 90]
... etc

但是当我垂直调整浏览器大小时，我只得到第一个项目，而另外两个最后一个子项目甚至没有在控制台中呈现。（这是我的问题）

(3) [100]
(3) [90]
(3) [80]
... etc

这告诉我的是，当我垂直调整大小时，最后两个子 div 的高度不会改变，但第一个项目会。

我怎样才能得到这样的东西（垂直调整大小时）。数组中的第一项更改但其他两个未更改的值保留在数组中。

(3) [100, 120, 110]
(3) [90, 110, 100]
(3) [80, 100, 90]
... etc

代码设置简化：

const ro = new ResizeObserver((entries) => {
      const childHeightArray = [];

      entries.forEach((entry) => {
        return childHeightArray.push(entry.contentRect.height);
      });

      console.log(childHeightArray);
});

children.forEach((child) => ro.observe(child));

我最好将 getBoundingClientRect 用于这种东西吗？谢谢你的时间！

标签： javascriptarrays