Recently an interesting new client-side JavaScript API appeared on the Web Platform, the IntersectionObserver API.
This tiny but useful API provides a means to efficiently monitor (observe) the visibility of specified DOM elements, that is, when they are in or out of a viewport (the viewport of the browser window or of an element). The definition of element visibility can be made precise specifying the fraction of the area of the element that intersects the viewport rectangle.
Some common applications and use cases for this feature include:
- Lazy-loading of content
- Infinite scrolling
- Ads visibility
- Animations triggered by scrolling (note: this is not a target use case. The visibility information reported by the API might come with a slight delay and pixel-perfect data are not guaranteed).
Browser Support
Being a fairly new API, its support at the time of this writing is still limited:
- Chrome desktop 51
- Chrome for Android 51
- Android WebView 51
- Opera 38
- Opera for Android 38
However, an in-development polyfill (there is no support for the root margin) is available on Github, so we can start to play with Intersection Observers right now.
In this article, we'll implement the infinite scrolling UX pattern. We'll use the aforementioned polyfill and even several ES6/ES2015 features along the way such as promises, template strings, and arrow functions.
Infinite Scrolling
Imagine we have a long list of items that we want to browse with infinite scrolling, so that when the user approaches the bottom of the document the next batch of items are loaded and appended to the end of the list.
Here is what we'll be building:
Continue reading %Native Infinite Scrolling with the IntersectionObserver API%
by Giulio Mainardi via SitePoint
