DEV Community

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

Posted on

What is Intersection Observer API in JavaScript?


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


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



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


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



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.

Top comments (0)