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.
- Simple: Demo and Code
- Multiple elements: Demo and Code
- Different root: Demo and Code
- Threshold: Demo and Code
- Infinite Scrolling: Demo and Code
For now Chrome 51+ and Chrome Canary, but there's a polyfill in the making.