10

Javascript Intersection Observer API – removing the listener, watching only for...

 3 years ago
source link: http://www.js-craft.io/blog/javascript-intersection-observer-api-removing-the-listener-watching-only-for-half-of-the-element-changing-the-viewport/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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

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.

I hope you have enjoyed this article and if you would like to get more articles about React and frontend development you can always sign up for my email list.

Newsletter subscribe:


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK