How to watch a change on the scrollWidth property of the an element with JavaScript?

Question

I want to perform a function when the scrollWidth value change on a property using vanilla JavaScript.

I tried the following but that does not work

var container = document.getElementById('my-container');
container.addEventListener('change', function (e) {
    if (e.offsetHeight < e.scrollHeight) {
        // Do something
    }
});

I also tried

var container = document.getElementById('my-container');
container.watch('scrollWidth', function (e) {
    // do something with container
});

But none seem to be working. How can I correctly watch for a change in the scrollWidth property of the container?

Does this answer your question? [Is there an event that fires on changes to scrollHeight or scrollWidth in jQuery?](https://stackoverflow.com/questions/1835219/is-there-an-event-that-fires-on-changes-to-scrollheight-or-scrollwidth-in-jquery) Note that it asks for jQuery but the accepted answer does not use jQuery. — Heretic Monkey, Mar 11 '20 at 23:11

score -3 · Answer 1 · edited Jan 22 '22 at 15:37

You can use the Resize Observer API to observe changes in an element's size (hopefully thats what you meant when you said scrollWidth)

The ResizeObserver API is an interface for observing changes to Element’s size. It is an Element's counterpart to window.resize event

An example is an Element that displays a map:

it displays a map by tiling its content box with Element tiles.

when resized, it must redo the tiling.

Source

Example below is from MDN's dom examples

if (window.ResizeObserver) {
  const h1Elem = document.querySelector('h1');
  const pElem = document.querySelector('p');
  const divElem = document.querySelector('body > div');
  const slider = document.querySelector('input[type="range"]');
  const checkbox = document.querySelector('input[type="checkbox"]');

  slider.addEventListener('input', () => {
    divElem.style.width = slider.value + 'px';
  })

  const resizeObserver = new ResizeObserver(entries => {
    for (let entry of entries) {
      if (entry.contentBoxSize) {
        h1Elem.style.fontSize = Math.max(1.5, entry.contentBoxSize.inlineSize / 200) + 'rem';
        pElem.style.fontSize = Math.max(1, entry.contentBoxSize.inlineSize / 600) + 'rem';
      } else {
        h1Elem.style.fontSize = Math.max(1.5, entry.contentRect.width / 200) + 'rem';
        pElem.style.fontSize = Math.max(1, entry.contentRect.width / 600) + 'rem';
      }
    }
    document.getElementById('message').textContent = (new Date()).toLocaleString() + ': width change: ' + divElem.computedStyleMap().get('width')
  });

  resizeObserver.observe(divElem);

  checkbox.addEventListener('change', () => {
    if (checkbox.checked) {
      resizeObserver.observe(divElem);
    } else {
      resizeObserver.unobserve(divElem);
    }
  });
} else {
  document.getElementById('message').textContent = 'Not supported'
}

#message {
  position: fixed;
  top: 0;
  background: yellow
}

<div>
  <h1>So what happened?</h1>
  <p>And remember, don't do anything that affects anything, unless it turns out you were supposed to, in which case, for the love of God, don't not do it! Ow, my spirit! I don't want to be rescued. You guys aren't Santa! You're not even robots. I've got
    to find a way to escape the horrible ravages of youth. Suddenly, I'm going to the bathroom like clockwork, every three hours. And those jerks at Social Security stopped sending me checks. Now 'I' have to pay 'them'!</p>
  <form>
    <div>
      <label>Observer enabled:</label><input type="checkbox" checked>
    </div>
    <div>
      <label>Adjust width:</label><input type="range" value="600" min="300" max="1300">
    </div>
  </form>

  <div id="message"></div>
</div>

There is no observation to check "scrollWidth" attribute, in this case, ResizeObserver won't be helpful — Itay Elkouby, Jun 28 '21 at 08:53

How to watch a change on the scrollWidth property of the an element with JavaScript?

1 Answers1