Understanding Intersection Observer API in Javascript

Understanding the Intersection Observer API in Javascript

With only a few lines, you can vastly improve UX.

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 over the last weekend.

What is the Intersection Observer API?

In short, it enables you to detect the visibility of an element, i.e. if it’s in the current viewport, and also the relative visibility of two elements in relationship to each other.

Use cases

• Lazy loading of images
• 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 :stuck_out_tongue_winking_eye:)
• To determine whether a user has read an article, and to what extent (think medium view v/s read stats)
• To run costly renderings and animations only when they are visible on the screen

The technical stuff

As per usual, the documentation on MDN is great, but I had some trouble figuring out a couple of things and so am sharing my notes here.

The core of Intersection Observer API is the following two lines.

var observer = new IntersectionObserver(callback, options);
observer.observe(target);

1. Fire 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

This was the tricky part to understand. Before going through the settings in options, you should have a firm grasp on the following:

<strong>Intersection Observer API</strong> lets you do something in the <strong>callback function</strong> when it <strong>observes </strong>an <strong>intersection</strong>(beyond a certain <strong>threshold</strong>) between the <strong>root</strong> element and the <strong>target</strong> 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 intersection is calculated.

Rules of thumb

1. The API is asynchronous, so use the callback function to do something when the intersection happens.
2. The root element can be decided using the CSS selector.
3. If you specify root: document.querySelector(‘null’), the current viewport of the user will be the root element.
4. 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

While learning this API I wanted to see if I could create something useful. So I wrote just a few lines and created a Chrome extension. The extension updates the URL with the ID of the latest section that is visible on the screen. 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 of lines written in less than an hour, eh?

MicroContext

Full code

The code for this extension is less than 30 lines long. If you would like to take it over just fork https://github.com/learning-paths-io/microcontext#js-flash-container or send me a pull request.

The extension is also listed on Product Hunt if you’d like to leave a review.

Understanding Intersection Observer API in Javascript was originally published in Hacker Noon on Medium, where people are continuing the conversation by highlighting and responding to this story.