IntersectionObserver Snippets — Free HTML CSS JS Scroll Reveal & Lazy Load Examples

IntersectionObserver lets the browser tell you when an element crosses a viewport threshold, instead of you asking on every scroll frame. That single inversion removes the layout thrash that makes hand-rolled scroll listeners janky, and it is why every reveal-style snippet in this library uses it.

The tag covers fire-once reveals and staggered grids, lazy loading of images and iframes, scrollspy navigation that highlights the section you are reading, infinite-scroll sentinels, and the "is this sticky header stuck yet" trick that has no other clean solution.

Push instead of poll

A scroll listener is a poll: you ask "are we there yet" on every single scroll event, and any layout read inside that handler — getBoundingClientRect, offsetTop — forces the browser to recompute layout synchronously, often dozens of times a second. An observer is a push: the browser does the intersection math on its own schedule, off the critical path, and calls your code only when a threshold is actually crossed. The snippets here never mix the two — once an observer is watching an element, no scroll listener duplicates that work.

Thresholds and rootMargin as tuning, not boilerplate

The threshold option controls how much of an element must be visible before it counts as intersecting, and rootMargin grows or shrinks the viewport box the observer checks against. A negative bottom margin is what makes a reveal fire once an element is meaningfully on screen rather than the instant its top pixel appears — a detail that is the difference between an animation that feels timed and one that feels premature.

Fire-once versus continuous watching

Most reveal and lazy-load snippets call unobserve on an element the moment they act on it, because re-triggering an entrance animation every time a user scrolls past it reads as a bug. Scrollspy and sticky-header detection are the exception — they need to keep watching indefinitely, since the answer to "which section is current" changes for as long as the page keeps scrolling.

The sentinel pattern

Infinite scroll and stuck-header detection both work by observing an invisible marker element rather than the content itself — a sentinel placed just before the end of a list, or a one-pixel element just above a sticky header. When the sentinel crosses the viewport, the observer fires, and the actual work (loading the next page, adding a "stuck" class) happens in response. It is a small indirection that turns two otherwise-awkward problems into the same well-understood technique.