管理在多个 div 上使用 IntersectionObserver 的问题

Question

因为我想在每个 div 出现在屏幕上时实现动画，所以我使用 IntersectionObserver API 来了解它们何时出现在视口中。

我的想法是为每个div创建一个观察者如下

this.box.forEach(name => {
  let isVis = false;
  handleEachCategory(name, isVis);
})

我的数据包含 CSS div 的名称，到目前为止我确实设法为每个创建了单独的观察者，但只有一个 div 触发了isVis 值的变化（定义我的 div 何时完全可见。

function handleEachCategory(category, isVis) {
            let target;
            let observer;
            window.addEventListener("load", (event) => {
                target = document.querySelector(category);
                createObserver();
            }, false);
            function createObserver() {
                let options = {
                root: null,
                rootMargin: '0px',
                threshold: 1.0
                }
                observer = new IntersectionObserver(handleIntersect, options);
                observer.observe(target)
            }
            function handleIntersect(entries, observer) {
                entries.forEach(entry => {
                    if (entry.intersectionRatio === 1)
                        setAsVisible();
                });
            }
            function setAsVisible() {
                isVis = true;
                console.log(isVis)
            }
        }

如您所料，我是 javascript 的新手，我的逻辑可能在某处失败了，到目前为止我似乎还看不出如何让它发挥作用。

表达我的问题的另一种方式是 "how to implement multiple intersection observers"，如果有更多 standard/preferred 方式，我很想知道。

Answer 1

我已经对你的代码做了一些修改，如下所示，这应该可以帮助你做你想做的事。您的代码可能存在的问题是 window.addEventListener("load" 仅在页面完全加载时发生一次。

window.addEventListener("load", (event) => {
  ["one", "two", "three"].forEach(name => {
    handleEachCategory(name);
  });
}, false);



function handleEachCategory(category) {
  let target = document.getElementById(category);
  let observer;
  let isVis;
  createObserver();

  function createObserver() {
    let options = {
      root: null,
      rootMargin: '0px',
      threshold: 1.0
    }
    observer = new IntersectionObserver(handleIntersect, options);
    observer.observe(target)
  }

  function handleIntersect(entries, observer) {
    entries.forEach(entry => {
      if (entry.intersectionRatio === 1)
        setAsVisible();
    });
  }

  function setAsVisible() {
    isVis = true;
    console.log(`${category} is${(!isVis ? " not" : "")} visible`)
  }
}

#one,#two,#three {
min-height: 100px;
}

#one {
background: red;

}

#two {
background: yellow;
}

#three {
background: green;
}

<div>
  <div id="one"></div>
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <div id="two"></div>
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <div id="three"></div>
</div>

管理在多个 div 上使用 IntersectionObserver 的问题

Issue managing to use IntersectionObserver on multiple divs

javascript

foreach

addeventlistener

intersection-observer