Question

我有一个Flexbox容器，其中有4个孩子，每个孩子都有with:50%。

我想为每个孩子创建一个IO（交叉观察器），但是由于某种原因，它仅适用于1º和3º元素...但是如果我为2º和4º元素创建一个新的IO，则它可以工作。

我在做什么错了？

这是演示：https://codepen.io/sandrina-p/pen/mddzpzW

Answer 1

您的代码如下：

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

它必须是这样的：

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

您拥有它的方式，如果多个元素同时触发观察者，它将仅在第一个上运行该函数。我拥有它的方式，它在匹配的每个条目上运行。

交叉口观察员无法与同级同工

1 个答案: