1

I want to use one observer to observe three elements. I have use three instance to observe everyone of my subject elements in my HTML to do some animations but i want to know if is it possible to use the same observer for all.

let observerDroit = new IntersectionObserver(function (entries){
    entries.forEach(function (observable){
        if (observable.intersectionRatio > 0.3){
            observable.target.classList.remove('not-visible-droite');
        }
        
    })
},{
    threshold:[0.3]
});

let parDroite = document.querySelectorAll('.actu');
parDroite.forEach(function (droite){
    droite.classList.add('not-visible-droite')
    observerDroit.observe(droite)
})

let observerGauche = new IntersectionObserver(function (entries){
    entries.forEach(function (observable){
        if (observable.intersectionRatio > 0.3){
            observable.target.classList.remove('not-visible-gauche');
        }
        
    })
},{
    threshold:[0.3]
});

let parGauche = document.querySelectorAll('.info');
parGauche.forEach(function (gauche){
    gauche.classList.add('not-visible-gauche')
    observerGauche.observe(gauche)
})


let observerTop = new IntersectionObserver(function (entries){
    entries.forEach(function (observable){
        if (observable.intersectionRatio > 0.3){
            observable.target.classList.remove('not-visible-top');

        }
        
    })
},{
    threshold:[0.3]
});

let parTop = document.querySelectorAll('.for-top');
parTop.forEach(function (top){
    top.classList.add('not-visible-top')
    observerTop.observe(top)
})



let observerZoom = new IntersectionObserver(function (entries){
    entries.forEach(function (observable){
        if (observable.intersectionRatio > 0.5){
            observable.target.classList.remove('not-visible-zoom');
        }
        
    })
},{
    threshold:[0.5]
});

let parZoom = document.querySelectorAll('.bio');
parZoom.forEach(function (zoom){
    zoom.classList.add('not-visible-zoom')
    observerZoom.observe(zoom)
})
Robert Harvey
  • 178,213
  • 47
  • 333
  • 501
Shazam72
  • 19
  • 1
  • 3
  • Your link is broken. This question will likely be closed because of low quality. A few lines of code to illustrates your problem would improve the quality as well. – kca Jan 14 '21 at 15:50
  • [link] shazam72.githun.io/Hallo_Docteur – Shazam72 Jan 15 '21 at 15:42
  • [`IntersectionObserver.observe()`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/observe): *"The IntersectionObserver method observe() adds an element to the set of target elements being watched by the IntersectionObserver. One observer has one set of thresholds and one root, but can watch multiple target elements for visibility changes in keeping with those. "* – Robert Harvey Jan 15 '21 at 16:08

1 Answers1

2

You can add as many elements as you want with IntersectionObserver.observe() So the answer to your question is: yes, you can use the same observer for all the elements.

Different callbacks

Anyway, I guess you ask because you want to use different callbacks for different sets of elements.

An answer to that would be this: "different callbacks for different targets with intersection observer api".

The general solution is to use one callback function, and decide what to do inside that callback function. E.g.:

// -- define handlers for individual elements --
const handlers = {
    'not-visible-droite': function( observable ){ /* ... */ },
    'not-visible-gauche': function( observable ){ /* ... */ },
    'not-visible-top':    function( observable ){ /* ... */ },
    'not-visible-zoom':   function( observable ){ /* ... */ },
};

// -- define handler for all elements --
const chooseHandler = function( observable ){
    if( observable.target.className /* ... some condition */ ){
        handlers['not-visible-droite']( observable );
    } else if( observable.target.className /* ... some condition */ ){
        handlers['not-visible-gauche']( observable );
    }
    // ...
};

// -- create one observer --
let observerAll = new IntersectionObserver(function( entries ){
    entries.forEach( chooseHandler );
},{ threshold: [ 0.3 ] });

// -- observe all
parDroite.forEach(function( droite ){ observerAll.observe( droite ); })
parGauche.forEach(function( gauche ){ observerAll.observe( gauche ); })
parTop.forEach(function( top ){ observerAll.observe( top ); })
parZoom.forEach(function( zoom ){ observerAll.observe( zoom ); })

Multiple thresholds

You can not use different thresholds with this approach, but you might observe every threshold, e.g. { threshold: [ 0.3, 0.5 ] }, and inspect the element inside the chooseHandler(), if that works for your use case.

Better one or multiple instances ?

I still find it hard to evaluate the pros and cons of using one or multiple instances of IntersectionObserver.

See also: One intersectionObserver to observe many elements or one intersectionObserver per element

There was a discussion about the API design, regarding one-target-per-observer and many-targets-per-observer: Should IntersectionObserver represent the observation of a single target Element

kca
  • 4,856
  • 1
  • 20
  • 41