Intersection Observer v2 Playground

IntersectionObserver Checking... v2 (trackVisibility) Checking...

Interactive Observer

Threshold Array

rootMargin

Top

Right

Bottom

Left

rootMargin: "0px 0px 0px 0px"

v2 Features

trackVisibility

delay (ms)

Scroll viewport (root)

Scroll down to see observed elements

Target #1

Keep scrolling...

Target #2

Almost there...

Target #3

End of content

Entry Properties Inspector

Scroll the viewport above to update these values in real time.

isIntersecting

intersectionRatio

isVisible (v2)

time

boundingClientRect

intersectionRect

rootBounds

Event Log

Scroll-Triggered Animations

Elements animate in as they enter the viewport.

Scroll down

Lazy Loading Demo

Images load only when scrolled into view. 0/10 loaded

Infinite Scroll

New items load automatically when you reach the bottom.

Loading more...

Performance: scroll event vs IntersectionObserver

Comparing callback frequency during a 2-second scroll simulation.

scroll event

IO (10 thresholds)

IntersectionObserver fires only at threshold crossings, while scroll events fire on every frame during scrolling.

API Reference

// Basic usage
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    console.log(entry.isIntersecting);    // boolean
    console.log(entry.intersectionRatio); // 0.0 to 1.0
    console.log(entry.isVisible);         // v2: boolean or undefined
  });
}, {
  root: null,                             // viewport (default)
  rootMargin: '0px 0px -50px 0px',        // shrink/expand root
  threshold: [0, 0.25, 0.5, 0.75, 1.0],  // callback triggers
  trackVisibility: true,                  // v2: actual visibility
  delay: 100                              // v2: min interval (ms)
});

observer.observe(element);
observer.unobserve(element);
observer.disconnect();