web-dev-qa-db-fra.com

Même observateur d'intersection pour plusieurs éléments HTML

J'essaie de le faire afin que certains éléments de texte cessent de se chevaucher un fond sombre, ils modifieront individuellement la couleur un par un à l'aide de l'utilisateur. Tous les éléments de texte sont position: fixed

EDIT: LES DOCS MDN DONNES (SIGNISSIS MINE):

L'intersection API d'observateur fournit un moyen d'observer de manière asynchrone à des changements dans l'intersection d'un élément cible avec un ancêtre élément

Je pense que cela signifie qu'il n'y a aucun moyen de résoudre mon problème car les éléments que je veux surveiller pour le chevauchement ne sont pas des enfants du root Je spécifie dans l'objet Options.

Y a-t-il un moyen de détecter le chevauchement si l'élément qui se chevauchent n'est pas un enfant de l'autre élément ?

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));
}

Il n'y a aucune erreur de console, mais le code ne fait rien.

javascriptintersection-observer
7
Ollie Williams

vous pouvez faire quelque chose comme ça, au moins cela m'aide:

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;
         }
    });
};
3
Ruslan Korkin