Watching for viewport changes with the Intersection Observer API

Introduction

Want to create animations on scroll? Or you need to update your Table of Contents when the reader is scrolling your article? You want to use the browser's Intersection Observer API.

This api allows you to watch when a element gets into the viewport and then run the callback you configured.

The API

These are the steps for using the API.

1. Give the root of the scrollArea an id and the element you want to watch an id
2. Create a callback with the event you want to trigger
3. Create the observer
4. Use the observer

Creating the markup with ids

First we create an identifiable scrollArea and element inside this scrollArea. Inside the header we show whether the element is in view.

<!-- this is the scrollArea -->
<div id="#scrollArea" class="scrollArea">
  <header id="theHeader">Element is not scrolled into view</header>

  <div id="scrollElement">First element</div>
</div>

.scrollArea {
  height: 400vh;
  font-size: 2rem;
}

#theHeader {
  position: fixed;
  top: 0;
}

#scrollElement {
  margin-top: 200vh;
  height: 100vh;
  background-color: red;
}

Creating the callback

First we reference the header so we can change the text. Then we create a function with a parameter of entries. Entries will be an array of objects. These objects will have a isIntersecting property which is either true or false. If the value is true the element is scrolled into view.

const theHeader = document.querySelector('#theHeader')

const callback = (entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      theHeader.innerText = 'The element scrolled into view'
    } else if (theHeader.innerText !== 'Element is not scrolled into view') {
      theHeader.innerText = 'The element scrolled out of view'
    }
  })
}

We change the header to 'The element scrolled into view' when the element is scrolled into view and change it to 'The element scrolled out of view' when the element leaves our viewport.

Configuring the observer

We configure the options for the observer. Here, for example, we can define whether we only want to trigger the callback when more than a certain percentage of the element is into view. We can also tell the observer what the root area is we want to watch. For all options reference the Mozilla docs.

const options = {
  // We select the area we want to watch
  root: document.querySelector('#scrollArea'),
}

const observer = new IntersectionObserver(callback, options)

Use the observer

// We select the element inside the area we want to watch for
const target = document.querySelector('#scrollElement')

observer.observe(target)

Final result

See the codepen for the final result.

See the Pen ZEpPqeQ by Marten West (@martenwest) on CodePen.

Conclusion

That's it. With a few lines of code we created an observer that watches your viewport and triggers a callback when an element enters or leaves your viewport. You can get very creative with animations or a little side popup asking your readers to sign up for your newsletter when they are nearing the end of your blog. Feel free to sign up to my newsletter when it enters your viewport. Happy reading.