'Detect When User Resizes Div With CSS resize: both

I know I can use ResizeObserver to detect when a div's size changes, but I would like to only know when the user resizes the div with the CSS property resize: both, and not when the page gets resized.

// Detect when user resizes element with the property resize: both;
div {
  resize: both;
  overflow: auto;
  border: 1px solid;
}
<div>
  Hi!
</div>
javascripthtmlcss


Solution 1:[1]

You can use 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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 vsync

Related Questions