Intersection Observer 不与兄弟姐妹一起工作

Question

我有一个有 4 个 childs 的 flexbox 容器，每个容器有 with:50%.

我想为每个 child 创建一个 IO（Intersection Observer），但由于某些原因，它只适用于 1º 和 3º 元素...但是如果我为 2º 和4º元素，有效。

我做错了什么？

这是演示：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';
    })
};

按照你的方式，如果多个元素同时触发观察者，它只会运行第一个上的函数。按照我的方式，它运行在匹配的每个条目上都包含它。

Intersection Observer 不与兄弟姐妹一起工作

Intersection Observer not working with siblings

javascript

intersection-observer