Introduction

Intersection Observer is a JavaScript API that allow users to observe the passing across of an element in relation to its viewport or its root element. It is the most useful observer based JavaScript.

Intersection observer is mostly used for:

1. Lazy-loading
2. Images on scroll
3. Infinite scrolling

In this article, we will understand the nook and cranny of intersection observe.

Prerequisites

Since this is a JavaScript API, you will need a basic knowledge of JavaScript, CSS and HTML.

How Intersection observer works

we are about to get coding...but before then let's check if our browser supports intersection observer.

you either use caniuse to check for your browser's compatibility or you can use a conditional statement like

if('IntersectionObserver' in window){
   console.log("your browser is compatible with intersection observer")
}else{
  console.log("your browser is not compatible")
}

or

if(!!window.IntersectionObserver){
  console.log("your browser is compatible with intersection observer")
}else{
  console.log("your browser is not compatible")
}

Structure of Intersection Observer

The IntersectionObserver constructor accepts two parameters which are:

1. Callback function :- This is executed when the observer notices an Intersection with the targeted element and its viewport(or root element). The callback function takes two parameters. i.e

   • the entries carrying the information about each Intersection observer and

   • the observer itself

2. Option :- This is simply a JavaScript Object which controls how the intersection is gong to work. It has three properties;

• root :- this is basically an element that is an ancestor of the elements being observed(NB: it could be the viewport). you might want to read that again...

• rootMargin :- this works the exact way css margin works. It defines the margin around the root, it tends to grow or shrink each side of the root element(or viewport).

• threshold - This represents the percentage of the target element(i.e the observed element) that must be visible before intersection occurs.

It value is any number between 0 and 1 (0 to be 0% and 1 to be 100%)

This is what a typical Intersection Observer looks like

let options = {
  root: null (or a specify element in the DOM),
  rootMargin: '0px', 
  threshold: 1 or could be array of number [0.25, 0.5, 0.75, 1]
}

const Observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => console.log(entry)
}, options)

Usuage

This is one of the uses of intersection observer...

Lazy loading

Observe, Unobserve & Disconnect

It is important to stop observing element when they no longer need to be observed. This can be done with the unobserve method or the disconnect method which are both methods in the Intersection observer. The "Unobserve" method takes a single element as its only parameter and it stops observing that single element. The "Disconnect" method takes no parameters and will stop observing all elements, meanwhile, the "observe" is just the opposite of "unobserve" and it also takes a single parameter(i.e the element you want to observe).

Conclusion

Just like you have seen and learnt.. The Intersection observer comes in really handy when it comes to creating light-weight websites coupled with the fact that it is easy to use compared to other observer APIs.

You can check Intersection Observer in mdn for deeper understanding. Thank you for your patience