ResizeObserver : Object

constructor

ResizeObserver allows you to provide a function that is called asynchronously when the size of observed elements change.

Spec

Constructors

new ResizeObserver(callback : Function) : ResizeObserver

callback(entries : Array<ResizeObserverEntry>, observer : ResizeObserver) : undefined

Creates a new ResizeObserver that will call callback when the size of elements passed to observe() change. Note that callback will be called at some time after the current script that causes the resize completes. The observer passed to callback is the newly created ResizeObserver.

Example:

<div id='foo' style='background: red;'></div>
<script>
  var foo = document.getElementById('foo');

  var observer = new ResizeObserver(function(entries) {
    entries.forEach(function(entry) {
      console.log(entry.target.id + ': ' + JSON.stringify(entry.contentRect));
    });
  });
  observer.observe(foo);

  console.log('before style change');
  foo.style.height = '10px';
  console.log('after style change');
</script>

Run

Results:

Spec

Instance Methods

disconnect() : undefined

Unhooks this observer from all targets specified in previous observe() calls.

Example:

<div id='foo' style='background: red;'></div>
<script>
  var foo = document.getElementById('foo');

  var observer = new ResizeObserver(function(entries) {
    entries.forEach(function(entry) {
      console.log(entry.target.id + ' changed');
    });

    // Unhook all targets and change size again. Notice no log is traced.
    observer.disconnect();
    foo.style.height = '20px';
  });
  observer.observe(foo);
  foo.style.height = '10px';
</script>

Run

Results:

Spec

observe(target : Element) : undefined

Registers the observer to be called any time the specified element's size changes. If observe() is called more than once, it will listen to changes on each target.

Example:

<div id='foo' style='background: red;'></div>
<script>
  var foo = document.getElementById('foo');

  var observer = new ResizeObserver(function(entries) {
    entries.forEach(function(entry) {
      console.log(entry.target.id + ': ' + JSON.stringify(entry.contentRect));
    });
  });
  observer.observe(foo);

  foo.style.height = '10px';
</script>

Run

Results:

Spec

unobserve(target : Element) : undefined

Removes target from the list of observer elements.

Example:

<div id='foo' style='background: red;'></div>
<script>
  var foo = document.getElementById('foo');

  var observer = new ResizeObserver(function(entries) {
    entries.forEach(function(entry) {
      console.log(entry.target.id + ' changed');
    });

    // Unhook and change size again. Notice no log is traced.
    observer.unobserve(foo);
    foo.style.height = '20px';
  });
  observer.observe(foo);
  foo.style.height = '10px';
</script>

Run

Results:

Spec

home license contribute feedback toggle light/dark mode