Intersection Observer API: Lazy Loading, Infinite Scroll, Scroll Animations, and TOC Active Links

The Intersection Observer API lets you detect when elements enter or leave the viewport — without polling, without scroll event listeners, and without expensive getBoundingClientRect() calls. It's the modern solution for lazy loading, infinite scroll, animation triggers, and ad viewability measurement. Firefox has full support.

Why Intersection Observer

The old approach to detecting element visibility:

// BAD: forces synchronous layout on every scroll event
window.addEventListener('scroll', () => {
  const rect = element.getBoundingClientRect();
  if (rect.top < window.innerHeight) {
    loadImage();
  }
});

Problems:

• getBoundingClientRect() forces a synchronous layout (expensive)
• Scroll events fire rapidly (60+ times/second on smooth scroll)
• Main thread blocking causes jank

Intersection Observer:

• Runs asynchronously, not on the main thread
• Callbacks only fire when intersection changes (not on every scroll)
• Batches observations
• ~10-100x less CPU usage

Basic Intersection Observer

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // Element entered viewport
      loadContent(entry.target);
      observer.unobserve(entry.target); // Stop watching after first load
    }
  });
});

// Start observing elements
document.querySelectorAll('.lazy-image').forEach(img => {
  observer.observe(img);
});

Options: threshold and rootMargin

const observer = new IntersectionObserver(callback, {
  // threshold: percentage visible that triggers callback
  threshold: 0,        // trigger when any pixel is visible (default)
  threshold: 0.5,      // trigger when 50% is visible
  threshold: 1.0,      // trigger only when fully visible
  threshold: [0, 0.25, 0.5, 0.75, 1.0], // trigger at each percentage

  // rootMargin: expand/contract the observation area
  rootMargin: '0px',           // default (exactly viewport)
  rootMargin: '200px',         // start loading 200px before entering viewport
  rootMargin: '-20px',         // only trigger when element is 20px inside viewport
  rootMargin: '0px 0px -100px 0px', // top right bottom left

  // root: default is the viewport
  root: document.getElementById('scroll-container'), // or any scrollable element
});

Lazy Loading Images

<img data-src="/photo.jpg" class="lazy" alt="Photo" loading="lazy">

// IntersectionObserver approach (works everywhere, more control)
const imageObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.classList.remove('lazy');
      imageObserver.unobserve(img);
    }
  });
}, { rootMargin: '300px' }); // Start loading 300px before viewport

document.querySelectorAll('img.lazy').forEach(img => imageObserver.observe(img));

Alternative: the loading="lazy" HTML attribute is simpler for images and <iframe> elements. Firefox supports it natively. The IntersectionObserver approach gives you more control (custom loading indicator, threshold, etc.).

Infinite Scroll

// Add a sentinel element at the bottom of the list
const sentinel = document.getElementById('list-sentinel');

const sentinelObserver = new IntersectionObserver(async (entries) => {
  if (entries[0].isIntersecting) {
    await loadMoreItems();
  }
}, { rootMargin: '100px' }); // Load 100px before reaching the bottom

sentinelObserver.observe(sentinel);

async function loadMoreItems() {
  const newItems = await fetchNextPage();
  renderItems(newItems);
  // sentinel is still being observed — will trigger again when it comes back into view
}

Scroll-Triggered Animations

const animationObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('animate-in');
    }
    // Optionally remove class to re-animate on scroll up:
    // else { entry.target.classList.remove('animate-in'); }
  });
}, { threshold: 0.15 }); // Trigger when 15% visible

document.querySelectorAll('.animate-on-scroll').forEach(el => {
  animationObserver.observe(el);
});

.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.5s, transform 0.5s;
}

.animate-on-scroll.animate-in {
  opacity: 1;
  transform: translateY(0);
}

Reading Progress Indicator

const article = document.getElementById('article');
const progressBar = document.getElementById('progress-bar');

const progressObserver = new IntersectionObserver((entries) => {
  const articleRect = article.getBoundingClientRect();
  const progress = Math.min(
    1,
    Math.max(0, (window.innerHeight - articleRect.top) / articleRect.height)
  );
  progressBar.style.width = (progress * 100) + '%';
}, { threshold: Array.from({ length: 101 }, (_, i) => i / 100) }); // 100 thresholds

progressObserver.observe(article);

Table of Contents Active Link

const headings = document.querySelectorAll('h2, h3');
const tocLinks = document.querySelectorAll('.toc a');

const headingObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    const id = entry.target.id;
    const tocLink = document.querySelector(`.toc a[href="#${id}"]`);

    if (entry.isIntersecting) {
      tocLinks.forEach(l => l.classList.remove('active'));
      tocLink?.classList.add('active');
    }
  });
}, { rootMargin: '-100px 0px -66% 0px' }); // Focus on top third of viewport

headings.forEach(h => headingObserver.observe(h));

IntersectionObserverEntry Properties

In the callback, each entry has:

entry.isIntersecting         // boolean: visible now?
entry.intersectionRatio      // 0-1: how much is visible
entry.boundingClientRect     // element's position
entry.intersectionRect       // visible portion's position
entry.rootBounds             // viewport/root bounds
entry.target                 // the DOM element
entry.time                   // DOMHighResTimeStamp when the change was detected

Cleanup

Always disconnect when no longer needed:

// Stop observing a specific element
observer.unobserve(element);

// Disconnect all observations (clean up when component unmounts)
observer.disconnect();

In React:

useEffect(() => {
  const observer = new IntersectionObserver(callback);
  observer.observe(elementRef.current);
  return () => observer.disconnect(); // cleanup
}, []);

Firefox DevTools Visualization

There's no dedicated Intersection Observer panel in DevTools, but you can debug it:

1. Add console.log(entry) in the callback
2. Open DevTools Console
3. Scroll the page — you'll see entries logged with full IntersectionObserverEntry data

Check entry.intersectionRatio and entry.rootBounds to verify your thresholds are triggering correctly.