Understanding the Intersection Observer API in JavaScript

With only a few lines, you can vastly improve UX

Gokul N K
Gokul N K
May 7, 2019 · 3 min read
Magic happens at an intersection. Photo by Denys Nevozhai on Unsplash.

I came across the Intersection Observer API while learning how Gatsby prefetches links to give the appearance of blazingly fast navigation. I postponed looking into it for a couple of months but finally dove in last weekend.


What Is the Intersection Observer API?


Use Cases

  • Infinite scrolls.
  • Prefetching of links when they appear on the screen (Gatsby does this).
  • To detect whether an ad was viewed or not (more tracking).
  • To determine whether a user has read an article and to what extent (think medium view vs. read stats).
  • To run costly renderings and animations only when they are visible on the screen.

The Technical Stuff

At the core of the Intersection Observer API are the following two lines:

var observer = new IntersectionObserver(callback, options);
observer.observe(target);
  1. First, you create an Observer with some options.
  2. Then, you ask the Observer to start observing a target.
  3. When the desired intersection happens, your callback function is called.

The Options

Intersection Observer API lets you do something in the callback function when it observes an intersection (beyond a certain threshold) between the root element and the target element.
  1. Think of root as the outer rectangle, or the rectangle within which you want to observe for an intersection.
  2. target is the element which you are watching.
  3. threshold gives you the extent to which the overlap should occur.
  4. rootMargin is the margin applied to the root before the extent of the intersection is calculated.

Rules of Thumb

  1. The root element can be decided using the CSS selector.
  2. If you specify root: document.querySelector(‘null’), the current viewport of the user will be the root element.
  3. Play around with threshold and rootMargin to get the exact behavior you are expecting.

This is pretty much the core concept in Intersection Observer API. For further reading, see MDN’s documentation.


Learning Output

So, when you share the updated URL with your friends, they can directly go to the section that you were reading. Pretty cool for a few lines written in less than an hour, eh?


Full Code

If you would like to use it, just fork the GitHub code or send me a pull request.

Better Programming

Advice for programmers.

Gokul N K

Written by

Gokul N K

Inquisitive, Student, Teacher and a wanna be Story teller. Working on https://learningpaths.io/

Better Programming

Advice for programmers.

More From Medium

More from Better Programming

More from Better Programming

More from Better Programming

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