Javascript Intersection Observer API – removing the listener, watching only for half of the element, changing the viewport

DanielJuly 22, 2021July 23, 2021

In yesterday's post, we have taken an initial look at what the Intersection Observer is. Btw, be sure to also check this article about how Github uses the observer to improve the performance of their main page.

But there are a few more tricks we can do with the Intersection Observer API. Let’s dig in!

How to remove the intersection lister

The callback function of an Intersection Observer gets two params. The watched entries and a reference to the actual observer. This second param can be used to unobserve an element:

const observer = new IntersectionObserver( (entries, observer) => {
    entries.forEach((entry)=> {
        if(entry.isIntersecting) {
            // do stuff and remove the listerner
            observer.unobserve(entry.target);
        }
    });
});

const myElement = document.querySelector('#my-special-div');
observer.observe(myElement);

Also, if you want to remove the lister from all of the observed elements at once you can use:

observer.disconnect();

Seting when an element is visible with the Intersection Observer

You can consider that an element visible only if just one pixel of it has entered the viewport. Or if all of its pixels are in the viewport. Or just half of it is in the viewport.

All of these options are controlled by a second param in the callback function, the options. One of its fields is the threshold.

Setting the threshold with a value from 0 to 1 will decide when an element is visible. Eq if we set it to 0.25 then an element will be considered visible if one-quarter of its pixels are in the viewport. The 1 means that all of its pixels need to be in the viewport. The default value is 0, meaning that the element is considered visible if at least one pixel is in the viewport.

const observer = new IntersectionObserver( (entries, observer) => {
    entries.forEach((entry)=> {
        if(entry.isIntersecting) {
            // do stuff
        }
    });
});

const myElement = document.querySelector('#my-special-div');
const options = {
    threshold: 0.5 // isIntersecting will become true when half of the pixels are in view
};
observer.observe(myElement, options);

Watching for something else besides the default viewport with the Intersection Observer

Let's say we want to watch for the intersection between one element and the footer. We can again use the options param for this.

The root will set the element to watch the intersection with. And we even have a rootMargin to set an extra space for when the intersection will be considered valid.

const observer = new IntersectionObserver( (entries, observer) => {
    entries.forEach((entry)=> {
        if(entry.isIntersecting) {
            // do stuff
        }
    });
});

const myElement = document.querySelector('#my-special-div');
// will listen for an intersection with the footer with a 100px gap
const options = {
    root: document.querySelector('#footer"),
    rootMargin: '100px'
};
observer.observe(myElement, options);

More detail about the options param here and a more in-depth tutorial about the Intersection Observer here.