Intro to Intersection Observer API

IntersectionObserver

Recent Chrome update 51.0 came packed with a IntersectionObserver API.
IntersectionObserver is helps to observe if an element is in the viewport.
As per actual definition,
The Intersection Observer API can be used to asynchronously observe changes in the intersection of a target Element with an ancestor element (for infinite scrolling lists) or the top-level document’s viewport (for ‘viewability’ tracking).

How to create a new Observer?

var observer = new IntersectionObserver();

To observe changes on an element, attach observer to the element

observer.observe(el);

View Demo

Comments