Intersection Observer
An ever-growing cheatsheet for Intersection Observer. I add things that I think are useful but difficult to unearth or understand.
Contents
Affect other elements based on target element
Referencing the index of the intersected entry in the callback function does not work, or at least it didn’t work for me over the several days I tried. What I mean by that is:
let observer = new IntersectionObserver(
(entries) =>
entries.forEach((entry, index) => {
console.log(index)
// Continue rest of code...
The trick is to instead set an id attribute to each observed element with a value that matches that of a data attribute (such as data-ref in my below example). For example, the below box with the letter ‘B’ (id="b"), when scrolled to, should show an image of a labrador (data-ref="b").
See the Pen Intersection Observer Simple Example by Danny White (@dw) on CodePen.