intersection observer

Intersection Observer — Live Demos

5 interactive examples

Threshold & intersectionRatio — scroll the box into view

Scroll the gold box through the container. The ratio meter shows intersectionRatio live, and the box turns green when isIntersecting is true at your chosen threshold.

threshold: fires at 50% visible
▼ Scroll the gold box through this container ▼
scroll down ↓
0% not intersecting
keep scrolling
intersectionRatio
0 0.5 1.0
--:--:--Scroll the box — watch isIntersecting flip at your threshold

rootMargin — grow or shrink the detection zone

Adjust the top/bottom rootMargin and scroll. The dashed zone is the effective detection area. Positive grows it (fires early); negative shrinks it (fires when deeper in view).

rootMargin: '0px 0px'
detection zone
target
--:--:--Move the slider, then scroll the target into the dashed zone

Scroll-reveal animation — one observer, unobserve after reveal

Scroll the container. Each item fades and slides in once, then the observer unobserve()s it. One observer watches all six items via entry.target.

▼ Scroll to reveal items ▼
scroll down ↓
Item 1 — fades in on scroll
Item 2 — then unobserved
Item 3 — runs once
Item 4 — shared observer
Item 5 — entry.target identifies me
Item 6 — last one
end
--:--:--Scroll down — items reveal once, then are unobserved

Lazy loading with rootMargin pre-load

Images load 100px before entering view (rootMargin: '100px'), so they're ready when you reach them. Watch the status flip from pending to loaded ahead of visibility.

▼ Scroll — images load just ahead ▼
scroll down ↓
image 1 · pending
image 2 · pending
image 3 · pending
image 4 · pending
image 5 · pending
end
--:--:--Scroll down — each image loads 100px before it's visible

Scrollspy — highlight the active section (negative rootMargin)

The nav highlights whichever section reaches the middle of the viewport, using rootMargin: '-40% 0px -40% 0px' to define a center "active zone".

Introduction
Setup
Usage
Advanced
--:--:--Scroll the sections — the active nav link follows the center
Read the tutorial