Same intersection observer for multiple HTML elements

Question

I am trying to make it so that as some text items stop overlapping a dark background, they will individually change color one by one as the user scrolls. All of the text items are position: fixed

EDIT: The MDN docs say (emphasis mine):

The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element

I think this means there is no way to solve my problem because the elements I want to monitor for overlap are not children of the root I am specifying in the options object.

Is there any way to detect overlap if the overlapping element is not a child of the other element?

if ("IntersectionObserver" in window) {
  const options = {
    root: document.getElementById("flow-landing"),
    rootMargin: "0px",
    threshold: 0,
  };

  var callback = function (entries, observer) {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.style.color = "white";
      } else {
        entry.target.style.color = null;
      }
    });
  };

  const observer = new IntersectionObserver(callback, options);

  var targets = [
    Array.from(document.querySelectorAll(".social-item")),
    Array.from(document.querySelectorAll(".additional-item")),
  ].flat();

  targets.forEach((target) => observer.observe(target));
}

There aren't any console errors but the code isn't doing anything.

Answer 1

Modifying Ruslan's answer a little because in his answer, multiple Intersection Observer objects are being created.

It is possible to observe multiple elements using the same observer by calling .observe() on multiple elements.

let observerOptions = {
    rootMargin: '0px',
    threshold: 0.5
}

var observer = new IntersectionObserver(observerCallback, observerOptions);

function observerCallback(entries, observer) {
    entries.forEach(entry => {
        if(entry.isIntersecting) {
          //do something
        }
    });
};

let target = '.targetSelector';
document.querySelectorAll(target).forEach((i) => {
    if (i) {
        observer.observe(i);
    }
});

Answer 2

you can do something like that, at least it helps me:

document.querySelectorAll('.social-item').forEach((i) => {
    if (i) {
        const observer = new IntersectionObserver((entries) => {
            observerCallback(entries, observer, i)
        },
        {threshold: 1});    
        observer.observe(i);
    }
})

const observerCallback = (entries, observer, header) => {
    entries.forEach((entry, i) => {
         if (entry.isIntersecting) {
             entry.target.style.color = "white";
         }
         else {
             entry.target.style.color = null;
         }
    });
};

Answer 3

You could use the offsetTop and offsetHeight properties instead of the IntersectionObserver API.

For example, when the user scrolls, you can check to see if the offsetTop of element 2 is greater than the offsetTop and less than the offsetHeight of element 1.

WARNING: use debounce because the scroll event's handler function will be called once for every pixel the user scrolls, just imagine the performance nightmare that would occur if user scrolled 600-1000 pixels.

The LoDash documentation, describes it's debounce function as:

"[a function that] creates a debounced function that delays invoking func (handler) until after wait (time) milliseconds have elapsed since the last time the debounced function was invoked."

If you aren't using LoDash, here is a Vanilla JavaScript debounce function:

function debounce(handler, time) {
  var timeout;
  return function() {
    var self = this, args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(function() {
      return handler.apply(self, args);
    }, time);
  };
}

Here is the code that'll allow you to "do stuff" if element 2 "intersects" element 1.

let element_1 = document.querySelector("#my-element-1");
let element_2 = document.querySelector("#my-element-2");
window.addEventListener("scroll", debounce(() => {
  if(element_2.offsetTop > element_1.offsetTop && element_2.offsetTop < element_1.offsetHeight) {
    console.log("The elements are intersecting.");
  }
}, 100));

In case that looks complex or hard to read, here is the same code, broken up into smaller chunks:

let element_1 = document.querySelector("#my-element-1");

let element_2 = document.querySelector("#my-element-2");

window.addEventListener("scroll", debounce(() => {

  let x = element_2.offsetTop > element_1.offsetTop;

  let y = element_2.offsetTop < element_1.offsetHeight;

  if(x && y) {

    console.log("The elements are intersecting.");

  }

}, 250));

Notes & information:

1. you could use the >= and <= operators instead of the > and < operators
2. a wait time that's too long could make the effect look unnatural and forced.

Good luck.