JavaScript/CSS: Detect when an element has been resized by the user-CodePudding

Say one has a div which is vertically resizable like a textarea as below. When the user resizes the div, I would like to run a javascript function, resizeHandler below.

It seems like the resize event is only for the document/window. And resize observer fires for all events, like say when the document is loading, it will fire resize observer events. So then I set a timeout to apply the resize observer after the page load, but the resize observer seems to remember historic resizes, and fires the previous resizes events.

Is there a clean way to run resizeHandler() when the user resizes the div, and not for pageloading layout shifts?

function resizeHandler() {
   console.log('the div was resized')
}

div {
    resize: vertical;
    height: 64px;
    overflow-y: auto;
    background-color:gray;
}

<div id="DIV" style="max-height:180px">This is a resizable div</div>

Note: I can't remove the style attribute of the div which sets the max-height.

CodePudding user response：

The simplest way would be to add an eventlitener on the resizeable div. And then use an resizeObserver.

const resizeable_div = document.querySelector(".resizeable");


resizeable_div.addEventListener("mouseup", () => {
  function outputsize() {
    console.log("resized");
  }

  new ResizeObserver(outputsize).observe(resizeable_div);
});

mousedown or mouseup. But this will ignore pagereloads, what you've wanted and only triggers if the user do something with the div.

Hope this helps you.

CodePudding user response：

The main reason was I wish to remove the maxHeight style property so it can be manually resized:

    DIV.get('LIST').addEventListener('mousemove', this.mouseMoveHandle.bind(this));

    mouseMoveHandle(event) {
        DIV.resized = DIV.style.getPropertyValue('height') !== '' 
        if (DIV.resized) DIV.style.maxHeight = 'unset';
    }