Understand and Implement Intersection Observer in JavaScript

What is Intersection Observer? #

The Intersection Observer is a JavaScript API that allows you to be notified when an element intersects with another element or the viewport. This means you can know when an element starts to be visible on the screen, fully visible, or even when it was visible and it’s not anymore.

This API is handy when you want to add some appear effects on your website’s blocks, infinite scroll, and much more.
If you are using a phone, you may notice that the header has a shadow when you scroll down; the scroll detection is done with the Intersection Observer by observing an element below the viewport’s height.

This post will cover the version 1 of the API.

What problem does it solve? #

Before the Intersection Observer, the only way to detect if an element was visible on the viewport was to use the event scroll and check each element’s boundaries. The problem with doing this is that it can cause performance issues, as the scroll event is often called. A throttle can help with the performance, but it’s still not the best solution.

How to use it #

Let’s look at how to use it; it’s straightforward.

First, you must create an instance of IntersectionObserver and pass a callback function as a parameter. This callback will be called every time the observed elements intersect. Do as follow:

// Instantiate the IntersectionObserver.
const observer = new IntersectionObserver((entries) => {
  // Do something.
});

// Observe an element.
observer.observe(document.querySelector(".element"));

Nothing to be afraid of, right?

As you can see, the callback takes one argument: an array of type IntersectionObserverEntry. It contains all the elements you are observing and intersecting.

Constructor’s options #

The IntersectionObserver constructor takes a second parameter, the options.

Let’s take a look at them:

• root: The parent element where the observed element is contained. If omitted, the Document is used by default.
• rootMargin: Defines margins around the observed element. Imagine you want to be notified when the element is 10 pixels before it appears; you can set the rootMargin to 10px. It works like the CSS margin property, which is top right bottom left. The default value is 0px 0px 0px 0px.
• threshold: This option will be the most used one. It allows you to define the percentage of visibility of the observed element before the callback is called. It could be an array of values or a single value. Here is an example: [0, 0.25, 0.5, 0.75, 1], which means the callback will be called when the element is 1 pixel visible, 25%, 50%, 75%, and 100% visible, so 5 times. By default, the value is 0; the callback will be called when the element is 1 pixel visible.

Here is an example:

// Instantiate the IntersectionObserver.
const observer = new IntersectionObserver((entries) => {
  // Do something.
}, {
  root: document.querySelector(".parent"),
  rootMargin: "10px 0 10px 0",
  threshold: [0, 0.25, 0.5, 0.75, 1],
});

My callback is called; what do I need to do?! #

Breath; you will see it’s straightforward 😎

As the parameter is an array, you must loop over it and do what you need to accomplish.
Imagine you want to add a specific class to the element when it’s visible; you can do as follow:

// Loop over all the elements.
for (const entry of entries) {
  // Check if the element is intersecting and
  // add the class visible to it.
  if (entry.isIntersecting) {
    entry.target.classList.add("visible");
  }
}

When this class is added, you can imagine running a CSS animation to make the element appears.

I told you it was easy 😁

How to unobserved an element? #

To unobserved an element, you must use the unobserve method from the variable observer. Here is an example:

observer.unobserve(entry.target);

Doing this will stop the callback from being called on this specific element when intersecting. Your website performance will thank you for this.

Performance is essential; pay attention to this part!

Can I unobserved an element from the callback? #

Yes, you can! Inside your callback, use the unobserve method from the observer object.

How to unobserved all elements? #

It is possible to unobserve all elements; it is called disconnect. To do so, you can do as follow:

observer.disconnect();

Thank you for reading me. If you enjoyed this article and consider offering me a ☕, I will be very grateful, and it will help me write new articles.

Useful links #

• Mozilla Documentation
• Browser Compatibility