intersection-observer

intersection-observer is a polyfill for the browser’s native IntersectionObserver API, which asynchronously reports when a target element enters or leaves the viewport (or another element). It lets you use the modern, efficient IntersectionObserver interface in older browsers that don’t implement it, without changing your application code.

Maintained by GoogleChromeLabs, the polyfill mirrors the W3C IntersectionObserver specification. Note that as of recent browser baselines the native API is universally supported, and the maintainers now recommend removing the polyfill from new projects.

What You Get

• A drop-in IntersectionObserver global for unsupporting browsers
• Spec-compatible IntersectionObserverEntry reporting (intersection ratio, bounds, time)
• A configurable polling interval for environments without mutation/scroll signals
• No code changes required — just load the polyfill before use

Common Use Cases

• Lazy-loading images and iframes as they scroll into view
• Implementing infinite scroll or ‘load more’ triggers
• Firing visibility-based analytics or ad-impression events

Under The Hood

Architecture - The polyfill is a single ~1,000-line file, intersection-observer.js, that guards installation behind a feature check and otherwise defines IntersectionObserver and IntersectionObserverEntry on the global object. It maintains a registry of active observers, computes element intersection rectangles against root/viewport bounds, and re-evaluates them on scroll, resize, DOM mutation, and a fallback polling timer, dispatching entries to callbacks with intersection ratios and timestamps.

Tech Stack - Plain ES5 JavaScript with zero runtime dependencies, distributed as a UMD-style script usable via <script> tag or bundler import. Packaged as classic npm with intersection-observer.js as main.

Code Quality - The repo ships a test harness (intersection-observer-test.js and intersection-observer-test.html) exercising the behavior in real browsers. The single-file implementation is mature, stable, and rarely changes, reflecting its polyfill nature.

API Design - By design there is no new API to learn: the polyfill exposes exactly the native IntersectionObserver surface, so existing code and documentation apply unchanged. The only extra knob is the tunable POLL_INTERVAL for environments needing periodic recomputation.