Enter the Intersection Observer

Connor Holyday
Oct 26, 2017 · 1 min read
Image for post
Image for post

Making their way onto the scene are some new JavaScript API’s known as Observers — and they’re awesome. This isn’t a technical write up, it’s intended to bring some awareness and hopefully make you say “oh that’s funky”.

The Intersection Observer API lets you keep watch on an element and triggers a function every time it crosses the edge of a set boundary. An example of this in action would be observing an image and then as it scrolls into view (or just before) you lazy-load it in.

You’d be right in thinking that we can already do this with scroll-listeners and all sorts of other methods, so what makes this special?

It’s fast. Intensely fast.

It tells you how much the element you’re observing has crossed the intersection in a range from 0 to 1. It also works horizontally, that means it’s reporting on both axes at the same time! How cool is that?!

I made the CodePen below to play around with it and it’s ridiculously easy to use. Experiment, have some fun, and as always be sure to check the MDN page for more detailed information.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store