Splendid utils

Super simple way to use Intersection Observer

Instead of writing the standard Intersection Observer boilerplate, just use our utility function.

It can’t get simpler than doing the stuff you want inside a standard callback!

main.js
const node = document.querySelector('.my-element')
const obs = intersectionObserver(node, {
  callback({ entry }) {
    // Do something with the intersection observer
  },
})

Listen to multiple elements at once

Grab the elements — either as an array or nodelist — and pass them to intersectionObserver. It’ll listen to them without complains.

main.js
const nodes = document.querySelectorAll('.elements')
const obs = intersectionObserver(nodes, {
  callback({ entry }) {
    // Do something with the intersection observer
  },
})

Unobserve or disconnect whenever you wish to

We support all the intersection observer methods you’d expect — check out the guide for more details.

main.js
const obs = resizeObserver(node, /* ... */)


// Stops listening to the element
obs.unobserve(node)

Automatically take records before disconnecting

Intersection Observer has a takeRecords method that lets you process unprocessed intersections before disconnecting.

We’ve built that directly into the disconnect method so you never have to worry about taking records manually.

main.js
const obs = intersectionObserver(node, /* ... */)


// Stops listening.
// No need to call `takeRecords` manually!
obs.disconnect()