IntersectionObserver

IntersectionObserver is a JavaScript API that allows you to efficiently observe changes in the intersection between an element and its container or the viewport. It provides a way to asynchronously track when an observed element enters or exits a specific area, known as the viewport or root element.

The IntersectionObserver API is useful for implementing various web features, such as lazy loading images, infinite scrolling, and triggering animations or effects when elements come into view. It simplifies the process of detecting visibility changes and reduces the performance impact associated with traditional methods like scroll event listeners.

The basic idea behind IntersectionObserver is that you create an instance of the IntersectionObserver class and provide it with a callback function to be executed whenever an observed element intersects or ceases to intersect with the specified root element. The API allows you to define the root element (usually the viewport by default), set options for the observation (e.g., thresholds for determining visibility), and observe one or multiple target elements.

When an intersection occurs, the callback function is invoked with an array of IntersectionObserverEntry objects. Each entry contains information about the observed element, such as its bounding rectangle, visibility ratios, and whether it is entering or exiting the viewport.

Here's a simplified example of using IntersectionObserver to track when an element becomes visible in the viewport: 

// Create an intersection observer instance
const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      console.log('Element is now visible!');
      // Perform actions, e.g., load an image or trigger an animation
    } else {
      console.log('Element is no longer visible!');
      // Perform cleanup or other actions
    }
  });
});

// Select the target element to observe
const targetElement = document.querySelector('#myElement');

// Start observing the target element
observer.observe(targetElement);

With IntersectionObserver, you can efficiently manage visibility changes and optimize the performance of your web applications by responding to those changes only when necessary.

---

More Info: 
https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API