Why Intersection Observer ?

#javascript #beginners #webdev

What is Intersection Observer API

By the mdn docs

The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.

Understand

This concept made by two words first is Intersection and another one is Observer. let's take basic view on this topic first.

By the name you can understand that the intersection means minimum to objects, in this concept the intersection taken with the one is viewport and another one is with the element such as div,img.

Observer is observe the viewport when the specific target element by you comes in the viewport then its give you an details the item you targeted is comes to your viewport. Obviously target element comes in to the viewport by scroll the page.

What can we do by observing the element 🤔 ?

Nowdays the website using this concept for giving animation on the element like:

The most impressive and bit a complex example of this Apple website

Why not scroll event ? 😒

Scroll event is an event listener when the target element scroll is keep calling the function when the element comes in the viewport and by this reason your animation get continuously render without any delay and it will not giving you output as your desired.

let's see this example.

For handle this you need to use Throttling for delay on your event handler function calling.

When you use Intersection Observer you don't need for any throttling.
For handle the this type of problem there is an Intersect Ratio by the observer this tells that how much part of the targeted element rendered in to the viewport.
There is an Threshold value which provided by the Intersection Observer API. It provide one or more numeric values representing percentages of the target element which are visible on the viewport.
In scroll event you need to calculate some complex calculation for get the value of the height view of the targeted element. In intersection observer you get these all values.
Intersect Ratio you can use for observe the targeted element. By the docs

The degree of intersection between the target element and its root is the intersection ratio. This is a representation of the percentage of the target element which is visible as a value between 0.0 and 1.0.

Here 0.0 means 0%, 0.5 means 50%, 1.0 means 100% visible on the viewport.

Example for change the page background color on scrolling by Intersection Observer API

Let's Start with code

By the reference of MDN Docs

let options = {
  root: document.querySelector('#scrollArea'),
  rootMargin: '0px',
  threshold: 1.0
}

let observer = new IntersectionObserver(callback, options);