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.