IntersectionObserver Examples

IntersectionObserver

The IntersectionObserver API provides an API to understand the visibility and position of DOM elements relative to a containing element or to the top-level viewport.

https://googlechrome.github.io/samples/intersectionobserver/index.html

Or in other words: IntersectionObserver lets you know when an element enters or leaves the viewport without the need of calling getBoundingClientRect() or scroll event handlers.

Examples

• Simple: Demo and Code
• Multiple elements: Demo and Code
• Different root: Demo and Code
• Threshold: Demo and Code
• Infinite Scrolling: Demo and Code

Browser Support

For now Chrome 51+ and Chrome Canary, but there's a polyfill in the making.

Additional ressources

• Google article
• Infinite Scrolling example
• Explainer Doc
• Specs
• Quick introduction to the Intersection Observer API