Intersection Observer

intersectionObserver gives you an incredibly simple way to use the Intersection Observer API — so much that you’ll probably wanna ditch the original API for good.

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!

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.

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.

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.

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

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

Basic Usage

Import the intersectionObserver function from @splendidlabz/utils/dom.

import { intersectionObserver } from '@splendidlabz/utils/dom'

Grab the element you want to listen to, and pass that into intersectionObserver. Three properties will be available in the callback:

entries — a list of all observed entries
entry — the current entry
observer — the intersectionObserver instance

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

Observing additional elements

You can observe additional elements after the initial setup with the observe method.

const observer = intersectionObserver(node, /* ... */)

// Observe additional elements
const node2 = document.querySelector('.my-element-2')
observer.observe(node2)

Listening to multiple elements

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

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

Event Listener Pattern

You can also listen for intersectionObserver changes via the event listener pattern. Just listen to the mutate event.

const observer = intersectionObserver(node, /* ... */)

node.addEventListener('mutate', ({ detail }) => {
  const { entries, entry, observer } = detail
  // Do something with the resize observer
})

Observer Options

You can pass in all intersectionObserver options to intersectionObserver via the second argument.

const observer = intersectionObserver(node, {
  callback({ entry }) { /* ... */ },
  // Other options go here ...
})

IntersectionObserver takes in three options:

root: The element used to check if observed elements are visible
rootMargin: Lets you specify an offset amount from the edges of the root
threshold: Determines when to log an observer entry

Stop observing

Stop observing one element

To stop observing one element, use the unobserve method.

const observer = intersectionObserver(nodes, /* ... */)
observer.unobserve(node)

Stop observing multiple elements

To stop observing multiple elements, you can pass the elements to unobserve to the unobserve method.

const observer = intersectionObserver(nodes, /* ... */)
observer.unobserve(nodes)

Alternatively, you can use the disconnect method to stop observing all elements.

Disconnect the observer

Disconnects the intersection observer and stops observing all elements.

While disconnecting, intersectionObserver will automatically call takeRecords to process any unprocessed intersections.

const obs = intersectionObserver(nodes, /* ... */)

// Disconnects the observer
obs.disconnect()

Please purchase a license to view this content

This content is part of our premium documentation. To access it, you'll need to have an active license for one of these products.

Get Layouts Get Basic Get Pro

If you already have a license, please login to access this content.