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

Incredible Demos

  • By
    Scroll IFRAMEs on iOS

    For the longest time, developers were frustrated by elements with overflow not being scrollable within the page of iOS Safari.  For my blog it was particularly frustrating because I display my demos in sandboxed IFRAMEs on top of the article itself, so as to not affect my site's...

  • By
    MooTools ContextMenu Plugin

    ContextMenu is a highly customizable, compact context menu script written with CSS, XHTML, and the MooTools JavaScript framework. ContextMenu allows you to offer stylish, functional context menus on your website. The XHTML Menu Use a list of menu items with one link per item. The...

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!