What is Intersection Observer?

Intersection Observer is a browser API that allows developers to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport. It is commonly used for lazy-loading images, infinite scrolling, or triggering animations when elements come into view. The API provides a callback that receives entries describing the intersection ratios and bounding boxes, enabling efficient, non-blocking updates. Unlike scroll event listeners, Intersection Observer runs in the browser's compositor thread, reducing layout thrashing and improving performance. To use it, you create an IntersectionObserver instance, pass a callback and options (root, rootMargin, threshold), and then call observe() on the target elements. When the element's visibility changes relative to the root, the callback is invoked with the intersection data.