CODEWITHSUNDEEP
javascriptintersection-observer
sandrina-p
sandrina-p

Reputation: 4170

Intersection Observer not working with siblings

I have a flexbox container with 4 childs, each one has with:50%.

I want to create an IO (Intersection Observer) for each child, but for some reason, it only works on the 1º and 3º element... But if I create a new IO for 2º and 4º elements, it works.

What am I doing wrong?

Here's the demo: https://codepen.io/sandrina-p/pen/mddzpzW

Upvotes: 2

Views: 1550

Answers (1)

TKoL
TKoL

Reputation: 13912

You had your code like this:

const watchContainer = ([entry]) => {
    console.log('IO card:', entry.target);
    entry.target.style.opacity = entry.isIntersecting ? '1' : '0';
};

It needs to be like this:

const watchContainer = (entries) => {
    entries.forEach(entry => {
        console.log('IO card:', entry.target);
        entry.target.style.opacity = entry.isIntersecting ? '1' : '0';
    })
};

The way you had it, if more than one element were triggering the observer at the same time, it would only run the function on the first one. The way I have it, it runs it on EVERY entry that matches.

Upvotes: 6

Related Questions