How to check an element is in viewport using Intersection Observer API

In the last article we have used a custom function to find an element is in viewport or not. But that solution have few drawbacks like we need to check for element on parent container scroll manually. Now we will gonna solve that issue by using Intersection observer API.

What is Intersection Observer API ?

It’s a normal API coming from JavaScript. This API is used to observe an element is currently visible or not. 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.

This API is very useful in a lot of places some of them are followings:

  • Lazy-loading of images or other content as a page is scrolled.
  • Implementing “infinite scrolling” web sites, where more and more content is loaded and rendered as you scroll, so that the user doesn’t have to flip through pages.
  • Reporting of visibility of advertisements in order to calculate ad revenues.
  • Deciding whether or not to perform tasks or animation processes based on whether or not the user will see the result.

Usage

This API is very easy to use. We can use it in two steps. First step is to create an Intersection Observer like:

const observer = new IntersectionObserver((entries, observer) => {
  
}, options);

Which receives only two arguments first is a callback function and second is options object.

Second step is to pass an element to our observer.

observer.observe(element);

Example

Let’s assume we have a normal div on our page and we want to attach Intersection observer to it.

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

We added a normal observer by providing a callback function and we are adding a console on the entries.

Now we can simple attach an element to our observer like this.

const ele = document.querySelector('.element');
 observer.observe(ele);

So now, whenever any element is displayed or get’s hidden on the viewport (which is a browser by default), the callback handler will be called and entries parameter of the callback function will be the array containing information for each observed element.

The most useful properties from the output are isIntersectingtarget and intersectionRect

  • isIntersecting: This will be true when element intersects with the default root which is viewport in our case
  • target: This will be the actual element on the page which we will be observing
  • intersectionRectintersectionRect tells how much part of the element is visible. This will contain the information about the element, its height, width, position from the viewport, etc

You can checkout live demo here.

Reference


4 Comments

How to add youtube videos to your React app - Blog React · July 14, 2020 at 3:32 am

[…] How to check an element is in viewport using Intersection Observer API Categories: Reactjs Tags: Reactjs Advanced […]

Tip 1: Check if Object is Empty in JavaScript without lodash - Blog React · July 16, 2020 at 3:40 am

[…] How to check an element is in viewport using Intersection Observer API […]

How to write regex in natural language - Blog React · July 17, 2020 at 3:41 am

[…] How to check an element is in viewport using Intersection Observer API […]

How to write regex in natural language - Carstly News · July 18, 2020 at 1:43 pm

[…] How to check an element is in viewport using Intersection Observer API […]

Comments are closed.