javascript - 如何使用 JavaScript 观察 an 元素的 scrollWidth 属性的变化？

Question

我想在 scrollWidth 值发生变化时使用 vanilla JavaScript 执行一个函数。

我尝试了以下方法，但不起作用

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

我也试过

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

但似乎都没有用。如何正确地观察 container 的 scrollWidth 属性的变化？

Answer 1

您可以使用 Resize Observer API 来观察元素大小的变化(希望这就是您所说的 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.

• 调整大小时，必须重新平铺。

Source

下面的例子来自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>