intersection-observer

What is intersection-observer?

The intersection-observer npm package is a polyfill for the Intersection Observer API, which provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport. This is particularly useful for tasks like lazy loading of images or implementing 'infinite scroll' features without relying on scroll events, thereby improving performance and resource usage.

What are intersection-observer's main functionalities?

Observing visibility of an element

This code sample demonstrates how to create an IntersectionObserver to monitor when a specific element, referred to as '.target-element', becomes visible within the viewport. When the element's visibility changes to visible, a message is logged to the console.

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('Element is visible!');
    }
  });
});

observer.observe(document.querySelector('.target-element'));

Lazy loading images

This example shows how to use IntersectionObserver for lazy loading images. Images with the class 'lazy-load' only load their source URL when they're about to enter the viewport, improving page load times. The observer stops watching an image once it has loaded.

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.src = entry.target.dataset.src;
      observer.unobserve(entry.target);
    }
  });
}, {rootMargin: '0px', threshold: 0.1});

document.querySelectorAll('img.lazy-load').forEach(img => {
  observer.observe(img);
});

Other packages similar to intersection-observer

react-intersection-observer

This package offers React components and hooks that make it easier to use the Intersection Observer API within React applications. It abstracts the API into more convenient React constructs, providing a more declarative approach compared to the vanilla intersection-observer polyfill.

vue-intersect

A Vue.js directive that leverages the Intersection Observer API, allowing Vue developers to easily implement intersection detection within their templates. Similar to react-intersection-observer, it provides a more integrated experience within the Vue ecosystem compared to the base intersection-observer package.

README

IntersectionObserver polyfill

This library polyfills the native IntersectionObserver API in unsupporting browsers. See the API documentation for usage information.

• Installation
• Configuring the polyfill
• Browser support
• Running the tests

Installation

You can install the polyfill via npm or by downloading a zip of this repository:

npm install intersection-observer

Adding the polyfill to your site

The examples below show various ways to add the IntersectionObserver polyfill to your site. Be sure to include the polyfill prior to referencing it anywhere in your JavaScript code.

Using <script> tags in the HTML:

<!-- Load the polyfill first. -->
<script src="path/to/intersection-observer.js"></script>

<!-- Load all other JavaScript. -->
<script src="app.js"></script>

Using a module loader (e.g. Browserify or Webpack):

// Require the polyfill before requiring any other modules.
require('intersection-observer');

require('./foo.js');
require('./bar.js');

Configuring the polyfill

It's impossible to handle all possible ways a target element could intersect with a root element without resorting to constantly polling the document for intersection changes.

To avoid this extra work and performance penalty, the default configuration of the polyfill optimizes for the most common IntersectionObserver use cases, which primarily include target elements intersecting with a root element due to:

• User scrolling.
• Resizing the window.
• Changes to the DOM.

All of the above can be handled without polling the DOM.

There are, however, additional use cases that the default configuration will not detect. These include target elements intersecting with a root element due to:

• CSS changes on :hover, :active, or :focus states.
• CSS changes due to transitions or animations with a long initial delay.
• Resizable <textarea> elements that cause other elements to move around.
• Scrolling of non-document elements in browsers that don't support the event capture phase.

If you need to handle any of these use-cases, you can configure the polyfill to poll the document by setting the POLL_INTERVAL property. This can be set either globally or on a per-instance basis.

Enabling polling for all instance:

To enable polling for all instance, set a value for POLL_INTERVAL on the IntersectionObserver prototype:

IntersectionObserver.prototype.POLL_INTERVAL = 100; // Time in milliseconds.

Enabling polling for individual instance:

To enable polling on only specific instances, set a POLL_INTERVAL value on the instance itself:

var io = new IntersectionObserver(callback);
io.POLL_INTERVAL = 100; // Time in milliseconds.
io.observe(someTargetElement);

Note: the POLL_INTERVAL property must be set prior to calling the .observe method, or the default configuration will be used.

Browser support

The polyfill has been tested and known to work in the latest version of all browsers.

Legacy support is also possible in very old browsers by including a shim for ES5 as well as the window.getComputedStyle method. The easiest way to support those browsers is via the following script from the polyfill.io:

<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=es5,getComputedStyle"></script>

Note: future versions of polyfill.io will include this IntersectionObserver polyfill, so the above code will no longer be necessary.

With these polyfills, IntersectionObserver has been tested an known to work in the following browsers:

✔

✔

6+

✔

7+

✔

4.4+

9.2+

Running the tests

To run the test suite for the IntersectionObserver polyfill, open the intersection-observer-test.html page in the browser of your choice.

If you run the tests in a browser that support IntersectionObserver natively, the tests will be run against the native implementation. If it doesn't the tests will be run against the polyfill.