Resize Observer

By  on  

Creating websites that are reactive and responsive used to be considered advanced but responsiveness is a necessity for successful websites and apps. We've added media queries, matchMedia, and a host of other APIs to help developers make responsiveness easier and now we get a new one: ResizeObserver. With the Resize Observer API, we can watch for resizing on individual elements!

Using ResizeObserver

To listen for resize changes on elements, create a ResizeObserver instance and call observe, passing an element:

const observer = new ResizeObserver(entries => {
  for (let entry of entries) {
    // Now do something with the resized element
    if (entry.contentRect.width < 1000) {
      // Stop making AJAX calls for content...
    }
  }
});
observer.observe(document.querySelector('div'));

An entry provides you a target element as well as its dimensions and positioning:

entry = {
  target: div, // The element passed to `observe`
  contentRect: {
  bottom: 88,
  height: 88,
  left: 0,
  right: 1043,
  top: 0,
  width: 1043,
  x: 0,
  y: 0
  }
}

Media queries and matchMedia provide an opportunity to adjust display via CSS but not functionality, which is where ResizeObserver fits in.

Years ago I created a hack for spying on elements using CSS, media queries, and :before, but it required polling via JavaScript to work properly. Having a legit, optimized JavaScript API to accomplish the same is refreshing and desperately needed!

Recent Features

  • By
    Write Better JavaScript with Promises

    You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...

  • By
    5 Ways that CSS and JavaScript Interact That You May Not Know About

    CSS and JavaScript:  the lines seemingly get blurred by each browser release.  They have always done a very different job but in the end they are both front-end technologies so they need do need to work closely.  We have our .js files and our .css, but...

Incredible Demos

Discussion

  1. unleashit

    Nice helpful tidbit as usual. Do you know why they chose to add a brand new API over just supporting onresize on elements other than window? If you read the docs for onresize you can see that at one time some browsers supported it: https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!