CODEWITHSUNDEEP
javascripthtmlcss
KetZoomer
KetZoomer

Reputation: 2914

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>

Upvotes: 6

Views: 1628

Answers (2)

Navand
Navand

Reputation: 476

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>

Upvotes: 6

Diego Fortes
Diego Fortes

Reputation: 9790

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>

Upvotes: 3

Related Questions