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>

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>

• javascript
• html
• css

• 2 Will this question help you? - stackoverflow./questions/8082729/… – s.kuznetsov Commented Mar 5, 2021 at 6:36

2 Answers 2

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>

You can use MutationObserver for this. Source here.

let observer = new MutationObserver(function(mutations) {
  console.log('Resized');
});

let child = document.querySelector('div');
observer.observe(child, { attributes: true });

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

<div>
  Hi!
</div>