Why Intersection Observer ?
Tags: javascript, beginners, webdev
Published: 2022-06-15 22:09:14

## 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: 

- [image lazy loading effect](https://7jnpj.csb.app/)
- [Infinite scrolling on page](https://pho2j.csb.app/) 
- [Framer motion animated in viewport](https://gqcc8.csb.app/)

The most impressive and bit a complex example of this [Apple website](https://www.apple.com/in/iphone-13/)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wbua1unjrqopvf3uzicg.gif)

## 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.

{% codepen https://codepen.io/SitePoint/pen/WxZjQY %}

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

{% codepen https://codepen.io/SitePoint/pen/RRLVrL %}

- 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**

{% codepen https://codepen.io/dmlb/pen/abvQzLe %}

## Let's Start with code
By the reference of MDN Docs

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

let observer = new IntersectionObserver(callback, options);
```
When the targeted element meet the threshold value specified by the **IntersectionObserver** the function callback is invoked. 

The callback receives a list of IntersectionObserverEntry objects.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/asb3muyuz2vjwew8zme5.png)



Example by MDN
{% codepen https://codepen.io/shailseen/pen/poaYoqR %}



Thanks for reading my blog 😊
Give your feedback and suggestions.