javascript - 检测用户何时使用 CSS 调整 Div 大小 : both

Question

我知道我可以使用 ResizeObserver 来检测 div 的大小何时发生变化，但我只想知道用户何时使用 CSS 属性 resize: both，而不是在调整页面大小时。

// Detect when user resizes element with the property resize: both;

div {
  resize: both;
  overflow: auto;
  border: 1px solid;
}

<div>
  Hi!
</div>

Answer 1

您可以使用ResizeObserver:

const observer = new ResizeObserver(mutations => {
  console.clear()
  console.log(mutations[0].contentRect.width, mutations[0].contentRect.height)
});

observer.observe(test);

#test {
  resize: both;
  overflow: auto;
  border: 1px solid;
  width: 100px;
  height: 100px;
}

<div id='test'>Hi!</div>