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)
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.
Top comments (0)