JavaScript Intersection Observer in 2026: The Complete Guide

The JavaScript Intersection Observer API is the modern way to detect when elements enter or leave the viewport. Before this API existed, developers relied on scroll event listeners with getBoundingClientRect() — a pattern that’s slow, jank-prone, and hard to get right. Intersection Observer solves all these problems with a clean, performant, asynchronous API.

In this guide, you’ll master Intersection Observer with practical implementations for lazy loading images, infinite scrolling, scroll-triggered animations, viewability tracking, and more. Every example is production-ready code you can use in your projects today.

What is Intersection Observer?

Intersection Observer asynchronously watches for changes in the intersection between a target element and an ancestor element (or the viewport). When the target becomes visible, partially visible, or hidden, your callback fires with detailed information about the intersection.

// The old way (BAD — runs on every scroll event)
window.addEventListener("scroll", () => {
  const rect = element.getBoundingClientRect();
  if (rect.top < window.innerHeight && rect.bottom > 0) {
    // Element is visible — but this runs 60+ times/second!
  }
});

// The modern way (GOOD — fires only on intersection changes)
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // Element just became visible
    }
  });
});
observer.observe(element);

The key advantage: Intersection Observer is handled by the browser at a low level, off the main thread. It doesn’t fire on every scroll pixel — only when the intersection state actually changes. This makes it dramatically more efficient than scroll event listeners.

Basic Usage & Setup

Creating an Intersection Observer involves three steps: define a callback, create the observer with options, and start observing elements.

// Step 1: Define the callback
function handleIntersection(entries, observer) {
  entries.forEach(entry => {
    console.log("Element:", entry.target);
    console.log("Is visible:", entry.isIntersecting);
    console.log("Visibility ratio:", entry.intersectionRatio);
    console.log("Bounding rect:", entry.boundingClientRect);
    console.log("Viewport rect:", entry.rootBounds);
    console.log("Intersection rect:", entry.intersectionRect);
  });
}

// Step 2: Create the observer
const observer = new IntersectionObserver(handleIntersection, {
  root: null,        // null = viewport
  rootMargin: "0px", // margin around root
  threshold: 0       // trigger when any pixel is visible
});

// Step 3: Observe elements
document.querySelectorAll(".watch-me").forEach(el => {
  observer.observe(el);
});

// Stop observing
observer.unobserve(specificElement);

// Disconnect completely
observer.disconnect();

The callback receives an array of IntersectionObserverEntry objects. Each entry provides the target element, whether it’s intersecting, the exact intersection ratio (0 to 1), and bounding rectangles for precise positioning calculations.

Observer Options Explained

The three options — root, rootMargin, and threshold — control when and how the observer triggers.

// root: The element used as the viewport
// null (default) = browser viewport
// Any scrollable ancestor = custom container
const scrollContainer = document.querySelector(".scroll-area");
const observer = new IntersectionObserver(callback, {
  root: scrollContainer // observe within this container
});

// rootMargin: Expands or shrinks the root's bounding box
// Same syntax as CSS margin: "top right bottom left"
const observer2 = new IntersectionObserver(callback, {
  rootMargin: "100px 0px" // Trigger 100px BEFORE element enters viewport
  // Negative values shrink: "-50px" means must be 50px inside viewport
});

// threshold: At what visibility ratio to trigger
const observer3 = new IntersectionObserver(callback, {
  threshold: 0    // Any pixel visible (default)
  // threshold: 0.5  — 50% visible
  // threshold: 1.0  — 100% visible
  // threshold: [0, 0.25, 0.5, 0.75, 1] — multiple thresholds
});

The rootMargin option is especially powerful. Setting "200px 0px" means the observer triggers when an element is 200 pixels before it actually enters the viewport. This is essential for pre-loading images and content before the user scrolls to them.

Lazy Loading Images

Lazy loading is the most common Intersection Observer use case. Instead of loading all images on page load, you load them only when they’re about to enter the viewport.

// HTML: <img data-src="photo.jpg" alt="..." class="lazy">

function lazyLoadImages() {
  const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (!entry.isIntersecting) return;

      const img = entry.target;
      // Replace data-src with src to trigger load
      img.src = img.dataset.src;

      // Optional: handle srcset for responsive images
      if (img.dataset.srcset) {
        img.srcset = img.dataset.srcset;
      }

      // Add loaded class for CSS fade-in
      img.addEventListener("load", () => {
        img.classList.add("loaded");
      });

      // Stop watching this image
      observer.unobserve(img);
    });
  }, {
    rootMargin: "200px 0px" // Start loading 200px before visible
  });

  document.querySelectorAll("img.lazy").forEach(img => {
    observer.observe(img);
  });
}

// CSS for fade-in effect
// .lazy { opacity: 0; transition: opacity 0.3s; }
// .lazy.loaded { opacity: 1; }

lazyLoadImages();

The rootMargin: "200px 0px" is crucial — it starts loading images 200 pixels before they enter the viewport, so they’re already loaded by the time the user scrolls to them. Without this margin, users would see a loading flash as images load just-in-time.

Note: Modern browsers support the native loading="lazy" attribute on <img> tags, which handles basic lazy loading without JavaScript. The Intersection Observer approach gives you more control — custom margins, fade-in animations, loading indicators, and priority management for selected DOM elements.

Infinite Scroll Implementation

Infinite scroll loads more content as the user approaches the bottom of the page. Intersection Observer makes this clean and efficient.

class InfiniteScroll {
  #observer;
  #sentinel;
  #loading = false;
  #page = 1;
  #hasMore = true;

  constructor(containerSelector, loadMore) {
    this.container = document.querySelector(containerSelector);
    this.loadMore = loadMore;

    // Create a sentinel element at the bottom
    this.#sentinel = document.createElement("div");
    this.#sentinel.className = "scroll-sentinel";
    this.container.appendChild(this.#sentinel);

    this.#observer = new IntersectionObserver(
      (entries) => this.#handleIntersect(entries),
      { rootMargin: "300px 0px" }
    );

    this.#observer.observe(this.#sentinel);
  }

  async #handleIntersect(entries) {
    const entry = entries[0];
    if (!entry.isIntersecting || this.#loading || !this.#hasMore) return;

    this.#loading = true;
    this.showLoader();

    try {
      const { items, hasMore } = await this.loadMore(this.#page);
      this.#hasMore = hasMore;
      this.#page++;

      items.forEach(item => {
        // Insert before sentinel so it stays at the bottom
        this.container.insertBefore(
          this.createItemElement(item),
          this.#sentinel
        );
      });

      if (!hasMore) {
        this.#observer.disconnect();
        this.#sentinel.textContent = "No more items";
      }
    } catch (error) {
      console.error("Failed to load more:", error);
    } finally {
      this.#loading = false;
      this.hideLoader();
    }
  }

  createItemElement(item) {
    const el = document.createElement("article");
    el.className = "item";
    el.innerHTML = `<h3>${item.title}</h3><p>${item.excerpt}</p>`;
    return el;
  }

  showLoader() {
    this.#sentinel.innerHTML = '<div class="spinner">Loading...</div>';
  }

  hideLoader() {
    this.#sentinel.innerHTML = "";
  }
}

// Usage
const feed = new InfiniteScroll("#feed", async (page) => {
  const res = await fetch(`/api/posts?page=${page}&limit=20`);
  const data = await res.json();
  return { items: data.posts, hasMore: data.hasNextPage };
});

The sentinel pattern is key: instead of observing all content items, you observe a single invisible element at the bottom. When it enters the viewport (or gets within 300px), you load more content and push the sentinel further down. This approach uses the Fetch API for data loading and handles the loading state to prevent duplicate requests.

Scroll-Triggered Animations

Intersection Observer powers the “animate on scroll” pattern seen on modern websites. Elements fade in, slide up, or scale when they enter the viewport.

function setupScrollAnimations() {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add("animate-in");
        // Optionally unobserve for one-time animations
        observer.unobserve(entry.target);
      }
    });
  }, {
    threshold: 0.15, // Trigger when 15% visible
    rootMargin: "0px 0px -50px 0px" // Must be 50px into viewport
  });

  document.querySelectorAll("[data-animate]").forEach(el => {
    observer.observe(el);
  });
}

// CSS classes for different animation types
// [data-animate="fade-up"] { opacity: 0; transform: translateY(30px); }
// [data-animate="fade-up"].animate-in {
//   opacity: 1; transform: translateY(0);
//   transition: all 0.6s ease-out;
// }
// [data-animate="scale"] { opacity: 0; transform: scale(0.9); }
// [data-animate="scale"].animate-in {
//   opacity: 1; transform: scale(1);
//   transition: all 0.5s ease-out;
// }

setupScrollAnimations();

The negative bottom rootMargin ("-50px") means the element must be at least 50px inside the viewport before the animation triggers. This prevents animations from firing when the element is barely peeking into view — a smoother, more intentional experience.

Sticky Header Detection

Detecting when a header becomes “stuck” (position: sticky) is surprisingly tricky with CSS alone. Intersection Observer provides a clean solution.

function setupStickyDetection() {
  const header = document.querySelector(".site-header");

  // Create an invisible sentinel above the header
  const sentinel = document.createElement("div");
  sentinel.style.cssText = "height: 1px; position: absolute; top: 0;";
  header.parentElement.insertBefore(sentinel, header);

  const observer = new IntersectionObserver(
    ([entry]) => {
      // When sentinel scrolls out of view, header is stuck
      header.classList.toggle("is-stuck", !entry.isIntersecting);
    },
    { threshold: 0 }
  );

  observer.observe(sentinel);
}

// CSS
// .site-header { position: sticky; top: 0; transition: all 0.3s; }
// .site-header.is-stuck { box-shadow: 0 2px 10px rgba(0,0,0,0.1); }

setupStickyDetection();

Ad Viewability Tracking

The advertising industry defines “viewable” as 50% of the ad visible for at least 1 second. Intersection Observer makes this measurement precise and efficient.

function trackViewability(adElement, onViewable) {
  let viewTimer = null;
  let viewed = false;

  const observer = new IntersectionObserver((entries) => {
    const entry = entries[0];

    if (entry.intersectionRatio >= 0.5 && !viewed) {
      // 50%+ visible — start 1-second timer
      viewTimer = setTimeout(() => {
        viewed = true;
        onViewable(adElement);
        observer.disconnect();
      }, 1000);
    } else {
      // Less than 50% visible — reset timer
      clearTimeout(viewTimer);
    }
  }, {
    threshold: [0, 0.5, 1.0]
  });

  observer.observe(adElement);
}

// Track all ads on the page
document.querySelectorAll(".ad-unit").forEach(ad => {
  trackViewability(ad, (element) => {
    console.log("Ad viewed:", element.dataset.adId);
    fetch("/api/track-view", {
      method: "POST",
      body: JSON.stringify({ adId: element.dataset.adId })
    });
  });
});

Multiple Thresholds & Ratios

Using an array of thresholds lets you react to different visibility levels — perfect for progress indicators and parallax effects.

// Create thresholds from 0 to 1 in 0.01 steps (100 thresholds)
const thresholds = Array.from({ length: 101 }, (_, i) => i / 100);

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    // intersectionRatio: 0.0 to 1.0
    const ratio = entry.intersectionRatio;

    // Use ratio for smooth parallax or opacity
    entry.target.style.opacity = ratio;
    entry.target.style.transform = `translateY(${(1 - ratio) * 50}px)`;
  });
}, { threshold: thresholds });

document.querySelectorAll(".parallax-item").forEach(el => {
  observer.observe(el);
});

Note that 100 thresholds means the callback fires very frequently during scroll. For smooth parallax, this works well since the callback is lightweight. For heavier operations, use fewer thresholds — 4-5 is usually plenty for step-based animations.

Performance vs Scroll Events

Intersection Observer dramatically outperforms scroll event listeners. Here’s why it matters.

Scroll events fire on every pixel of scrolling — potentially 60+ times per second. Each invocation runs getBoundingClientRect(), which forces the browser to calculate layout (a “forced reflow”). With 50 elements to track, that’s 50 layout calculations per frame — enough to cause visible jank.

Intersection Observer handles intersection calculations internally, batches notifications, and runs asynchronously. It only fires your callback when actual intersection changes occur. For the same 50 elements, your callback might fire once every few seconds instead of 3000+ times per second.

// BAD: Scroll event listener with forced reflow
// Fires ~60 times/second, each calling getBoundingClientRect
window.addEventListener("scroll", () => {
  elements.forEach(el => {
    const rect = el.getBoundingClientRect(); // Forced reflow!
    if (rect.top < window.innerHeight) {
      el.classList.add("visible");
    }
  });
});

// GOOD: Intersection Observer — no forced reflows
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    entry.target.classList.toggle("visible", entry.isIntersecting);
  });
});
elements.forEach(el => observer.observe(el));

Common Patterns & Best Practices

Always unobserve after one-time actions. For lazy loading and one-time animations, call observer.unobserve(entry.target) after handling the intersection. This reduces the number of elements the observer tracks over time.

Disconnect when done. If all elements have been processed (like all images loaded), call observer.disconnect() to free resources entirely.

Use rootMargin for preloading. Always set a positive rootMargin for lazy loading so resources load before they’re visible. A 200-300px margin prevents loading flashes. Think of it as looking ahead on the road — the further ahead you look, the smoother the experience.

Keep callbacks lightweight. The observer callback runs on the main thread. Heavy processing in the callback defeats the purpose of using Intersection Observer. For heavy work, use the callback to trigger a Web Worker or schedule work with requestIdleCallback.

One observer for many elements. A single observer instance can watch hundreds of elements efficiently. Don’t create a new observer per element — that wastes memory and defeats the batching optimization.

Conclusion

The JavaScript Intersection Observer API is essential for building performant, modern web applications. You’ve learned how to implement lazy loading images, infinite scroll, scroll-triggered animations, sticky header detection, ad viewability tracking, and smooth parallax effects — all without janky scroll event listeners.

The key principle: let the browser handle intersection detection instead of doing it yourself in JavaScript. Intersection Observer is more performant, more accurate, and produces cleaner code than any scroll-based alternative. Use it for any feature that depends on element visibility in the viewport.

With Batch 8 complete, you’ve covered advanced browser APIs that power modern web applications. These patterns — Proxy for metaprogramming, localStorage for persistence, timers for scheduling, Workers for parallelism, and Intersection Observer for viewport detection — form the toolkit that separates intermediate JavaScript developers from advanced ones.