IntersectionObserver : Entry not recognized anymore when a class or a style has been added to it

53 views Asked by At

I'm going to explain this issue the easiest way i can :

this works ( i can get "entry from above" in the console) :

let count = 0;

        const stickyElementsObserver = new IntersectionObserver((entries) =>{
        entries.forEach((entry)=>{
            if(entry.isIntersecting){
                console.log('entry : ', entry.target.id);
                
                
                if(entry.target.id === 'parfum'){
                    if(count===0){
                        title.classList.add('opacityZero');
                        /*entry.target.classList.add('scaleUp');*/
                        count = count + 1;
                        
                    }else if(count > 0){
                            title.classList.remove('opacityZero');
                            
                                console.log('-- entry from above --');
                                count = 0;
                    }
                }
                
                
    
            }
        });
     },{rootMargin: "0px 0px -300px 0px", threshold: 1.0});
    
     argumentsElem.forEach((el)=>stickyElementsObserver.observe(el));

this doesn't : (even if scale up effect from adding scalUp class works i can't get "entry from above" message, and so, all the events that should be fired after, wouldn't) :

let count = 0;

        const stickyElementsObserver = new IntersectionObserver((entries) =>{
        entries.forEach((entry)=>{
            if(entry.isIntersecting){
                console.log('entry : ', entry.target.id);
                
                
                if(entry.target.id === 'parfum'){
                    if(count===0){
                        title.classList.add('opacityZero');
                        entry.target.classList.add('scaleUp');
                        count = count + 1;
                        
                    }else if(count > 0){
                            title.classList.remove('opacityZero');
                            
                                console.log('-- entry from above --');
                                count = 0;
                    }
                }
                
                
    
            }
        });
     },{rootMargin: "0px 0px -300px 0px", threshold: 1.0});
    
     argumentsElem.forEach((el)=>stickyElementsObserver.observe(el));

It seems intersectionObserver doesn't recognize entries that have been "dynamically" changed, or whose new classes have been added

EDIT: Issue seems to be resolved by changing entries elements. Entries were div containers instead of elements in it, resulting to some unexpected behavior for me. i think It's because height div was not the same than the element i was looking for. i was scaling up the entire div by 2 resulting to not be able to scroll outside of that div once effect applies ... and get the message i want. Now it works.

however i'm still experiencing some little bugs sometimes depending on how fast i scroll, it's preferable to limit the number of intersectionobserver you create, and also the number of changes or effects linked to them, for a smoother client experience.

0

There are 0 answers