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

Question

我正在试验 IntersectionObserver()，它的行为很奇怪：我使用的是一个非常简单的布局，在同一个 div 中只有 8 个图像，使用 flexbox，使用 wrap，所以基本上是 8 个图像根据视口的大小将自己定位在不同的行中。我首先对每个元素应用滤镜 class（添加模糊滤镜），然后在它们显示在屏幕上时将其删除：

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>

JAVASCRIPT

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
  });
};

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

IntersactionObserver() only observes the first element of a row instead of all

javascript

intersection-observer