时间戳

首页 > 解决方案 > addEventListener（'resize' 不适用于具有相对大小的 div

javascript - addEventListener（'resize' 不适用于具有相对大小的 div

问题描述

我正在尝试为具有相对大小的 div 设置调整大小侦听器。div 上有一个height: 100%样式，我希望当 div 的像素高度随其父容器发生变化时触发该事件。这是我的基本代码：

索引.html

<html>
  <body>
<div class="foo"></foo>
  </body>
</html>

main.css

.foo {
  background-color: blue;
  height: 100%;
    width: 100%;
}

html, body {
  height: 100%;
  width: 100%;
}

main.js

document.querySelector(".foo").addEventListener("resize", () => {
  console.log("foo resize");
});

window.addEventListener("resize", () => {
  console.log("window resize");
});

当我调整窗口大小时，我会在控制台中得到预期的“窗口调整大小”文本，但永远不会打印“foo resize”。我还需要做些什么来让 foo resize 处理程序触发吗？

标签： javascripthtml

解决方案

该resize事件仅在window对象上触发。正在ResizeObserver制作中，允许观察任意元素的大小调整，但浏览器对它的支持仍然非常稀缺。然而，有一些 polyfills 可以模仿它的行为，比如NPM 上的 resize-observer-polyfill。

推荐阅读