DEV Community

Cover image for What is Intersection Observer API in JavaScript?
Shiva Aryal
Shiva Aryal

Posted on

6 2 1 1 1

What is Intersection Observer API in JavaScript?

Introduction

The intersection observer API is one of the Observer API in JavaScript which provides a way to observe changes in the the visibility and position of a DOM element relative to the containing root element or viewport asynchronously. . This will By Intersection Observer, we can control the element’s loading and animations based on the target element’s visibility and positions. This observer API is mainly used for infinite scrolling, lazing loading images, track the user interactions and scroll based animations.

In this article, we will discuss about all the basics of Intersection Observer API so that you can implement on your website and looks cool 😎.

Constructor

const observer = new IntersectionObserver(callback, options)
Enter fullscreen mode Exit fullscreen mode

Parameters

callback:

A function which is called when the percentage of the target element is visible crosses a threshold. The callback receives as input two parameters: entries and observer

  • Entries: Entries parameter is an argument that accepts function and it just outputs the information related to each element that changes its intersection status.

  • Observer: observer tells to observe intersection changes for the element. Now for an element to change its intersection status it must scroll in/out of the current viewport.

options:

Options is an optional parameter which includes the settings of the current observer. The options are

  • root: Root helps to identify actually where to start observing the elements. For example if we set { root: document.querySelector('#scrollArea') } then the observer API will start observing the scollArea id only.

  • rootMargin: Root margin is similar with CSS margin property. It will add margin around the root element to extend, or shrink the capturing frame when the dimensions of the root do not provide enough flexibility. It's defaults is "0px 0px 0px 0px" or "0px"

  • thresholds: Thresholds accepts a value between 0 and 1 which represents the percentage of the element that must be visible before isIntersecting value becomes true. By default it will set to 0 which means as soon as any part of the element is visible it will be considered intersecting. If we update to 1 then unless whole part of the element is visible, intersecting will false.

Methods:

  • disconnect() - disconnect() method stops watching all of its target elements for visibility changes.

  • observe() - observe() method is to observe intersection changes for the element with the id or querySelector.

  • takeRecords() - takeRecords() method is to

  • unobserve() - unobserve() method helps to stop observing elements when they are no longer needed to be observed.

Example

Conculusion:

The Intersection Observer is great observer APIs helps so many use cases from lazy loading images, to scroll based animations. It is also incredibly easy to use which is a huge bonus.

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay