← Service Workers (Intro)Mutation Observer →

Intersection Observer API

The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or viewport.

Lazy loading images/contents
Infinite scrolling
Scroll-driven animations
Ad visibility tracking
Task scheduling based on visibility

⚙️ Observer Settings

Threshold: 0.5% of element visibility needed to trigger

Root MarginMargin around root (like CSS margin)

📊 Scroll Info

Scroll Percentage:

0.0%

Sticky Header: INACTIVE

🎯 Observable Elements

Scroll to see intersection changes

Box 1

Box 2

Box 3

Box 4

Box 5

Box 6

Box 7

Box 8

Box 9

🖼️ Lazy Loading Demo

Scroll to load image

∞ Infinite Scroll Demo

Item #1
Item #2
Item #3
Item #4
Item #5
Item #6
Item #7
Item #8
Item #9
Item #10
Loading more...

📝 Code Example

JavaScript Editor

// Basic Intersection Observer
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    console.log(`Element is ${entry.isIntersecting ? 'visible' : 'hidden'}`);
    console.log(`Intersection ratio: ${entry.intersectionRatio}`);
    
    if (entry.isIntersecting) {
      entry.target.classList.add('animate');
      // Load lazy content
      if (entry.target.dataset.src) {
        entry.target.src = entry.target.dataset.src;
      }
    }
  });
}, {
  // Options
  root: null, // viewport
  rootMargin: '0px',
  threshold: 0.5 // 50% visibility
});

// Observe elements
document.querySelectorAll('.observable').forEach(el => {
  observer.observe(el);
});

// Lazy loading images
const imageObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.classList.add('fade-in');
      imageObserver.unobserve(img);
    }
  });
}, { rootMargin: '50px' });

// Infinite scroll
const lastItemObserver = new IntersectionObserver((entries) => {
  if (entries[0].isIntersecting) {
    loadMoreItems();
  }
}, { threshold: 1.0 });

// Animation on scroll
const animateObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.style.opacity = '1';
      entry.target.style.transform = 'translateY(0)';
    }
  });
}, { threshold: 0.1 });

// Unobserve when done
observer.unobserve(element);
observer.disconnect();

Use Cases & Best Practices

Common Use Cases:

Lazy loading images, videos, iframes
Implementing infinite scroll
Triggering animations on scroll
Reporting ad visibility
Deferring non-critical resources
Implementing "read more" functionality

Best Practices:

Use appropriate thresholds for your use case
Unobserve elements when done
Disconnect observer when component unmounts
Consider performance with many observed elements
Use rootMargin for pre-loading content
Combine with other APIs (ResizeObserver, etc.)

← Service Workers (Intro)Mutation Observer →

Frontend

JavaScript & Frameworks

Backend

Artificial Intelligence

Database

CSS Frameworks

Data Analytics

Digital Marketing

Frontend

Backend

Artificial Intelligence

DevOps

Database

Cyber Security

JavaScript Tutorial