IntersactionObserver() 仅观察一行的第一个元素，而不是所有元素

Question

我正在尝试 IntersectionObserver()，它的行为很奇怪：我使用一个非常简单的布局，在同一个 div 中只有 8 个图像与 Flexbox，使用换行，所以基本上这 8 个图像将自己定位在不同的行中，根据视口的大小。我首先将过滤器类（添加模糊过滤器）应用于每个元素，然后在它们显示在屏幕上时将其删除：HTML：<div class="flex--cont">            <div class="box box-2">                <img src="img/1.jpg" alt="" class="img img-1">            </div>            <div class="box box-1">                <img src="img/2.jpg" alt="" class="img img-2">            </div>            <div class="box box-3">                <img src="img/3.jpg" alt="" class="img img-3">            </div>            <div class="box box-4">                <img src="img/4.jpg" alt="" class="img img-4">            </div>            <div class="box box-5">                <img src="img/5.jpg" alt="" class="img img-5">            </div>            <div class="box box-6">                <img src="img/6.jpg" alt="" class="img img-6">            </div>            <div class="box box-7">                <img src="img/7.jpg" alt="" class="img img-7">            </div>            <div class="box box-8">                <img src="img/8.jpg" alt="" class="img img-8">            </div>        </div>脚本语言const allImage = Array.from(document.querySelectorAll(".img"));allImage.forEach((img) => img.classList.add("filter"));const removeFilter = function (entries, observer) {  const [entry] = entries;  const image = entry.target;  image.classList.remove("filter");};const ImageObserver = new IntersectionObserver(removeFilter, {  root: null,  threshold: 0.15,});allImage.forEach((img) => ImageObserver.observe(img));问题是观察者实际上只观察每行的第一个元素，所以如果我有 2 行，它只会获得第 1 和第 5 个图像，如果我有 3 行，它会获得第 1、第 4 和第 7 个图像等等。我确实已将其应用于所有图像。它为什么要这么做？感谢您的回答！

Answer 1

只有第一个发生了变化，因为这就是您通过仅解构第一个数组元素来更改颜色函数的目标：

const [entry] = entries;

但是，InteractionObserver回调不是针对每个条目调用的，而是针对同时触发的所有条目调用的；因此该entries数组包含所有被观察的项目，您需要isIntersecting像这样检查属性：

const changeColor = function(entries) {

  entries.forEach(entry => {

    if(entry.isIntersecting) {

      entry.target.style.background = 'blue';

    } else {

      entry.target.style.background = 'red';

    }

  })

}

来自 MDN 文档

let callback = (entries, observer) => {

  entries.forEach(entry => {

    // Each entry describes an intersection change for one observed

    // target element:

    //   entry.boundingClientRect

    //   entry.intersectionRatio

    //   entry.intersectionRect

    //   entry.isIntersecting

    //   entry.rootBounds

    //   entry.target

    //   entry.time

  });

};