Understanding the Intersection Observer API

Tram Ho

In the past, it was very difficult to determine if an element was currently visible in the viewing area, or to see if the user was reading this content. To develop the website and get the data above to handle some useful functions to increase user experience and speed up the site. Today we have the same potential of the Intersection Observer API

What is the Intersection Observer API?

According to MDN

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.

The Intersection Observer API provides a way to observe asynchronously observing changes in the interface with ancestor elements or with top-level document’s viewport.

(viewport: is a frame, maybe a polygonal area (usually a rectangle) on the screen that you are seen in. In a web browser, it refers to the document that the user is seeing , what appears in the application window (or on the screen if displayed in full screen). The parts outside the viewport are things you don’t see until you scroll to it.

Features are applicable

  • Lazy-loading images or other information when the page is scrolling.
  • Perform an “infinite scrolling” web page, where more and more information is downloaded and displayed as you scroll so users don’t have to flip through pages.
  • Report the visibility of the ad to calculate ad revenue.
  • The decision whether or not to perform tasks or animations is based on whether the user sees it or not.
  • etc …….


The examples

first . Lazyloading


In this example, we will save the image in data-src

and load the image from data-src into src when scrolling to the image

Here we can see a provided attribute:

This is a property that can temporarily expand or narrow the scope of the element we are following. In the example above we can see, the image load is executed when we scoll away from the position. Current image is 200px. If we do not use this property, the load will be executed as soon as the location of the image goes into the viewport. They can be used with values ​​similar to the CSS border properties, for example, “10px 20px 30px 40px” (top, right, bottom, left).

Here I will give you another useful attribute

threshold : indicates the percentage of the component’s visibility to be performed. If you only want to detect when visibility exceeds 50%, you can use the value 0.5.

2 . Infinite Scroll


HTML section

Part Js

Compare Intersection Observer and EventListener Scroll

According to many articles comparing the Intersection Observer for a better feature, its power is in its flexibility and integrated functions. You can also see some of the comparison articles here:


Can I Use


The Intersection Observer provides outstanding features, making it easier to handle complex functions and improve performance. Replaces EventListener Scroll in handling many tasks, such as lazy load images, infinite scroll, …


Share the news now

Source : Viblo