Проблема, связанная с использованием IntersectionObserver на нескольких div

Question

Поскольку я хочу реализовать анимацию, когда каждый div появляется на экране, я использую API IntersectionObserver, чтобы узнать, когда они находятся в области просмотра.

Моя идея - создать наблюдателя для каждого 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, и мой лог c, вероятно, где-то не работает, я просто не могу понять, как сделать пока это работает.

Еще один способ сформулировать мой вопрос - «как реализовать несколько наблюдателей пересечения», если есть более стандартный / предпочтительный способ, я бы хотел узнать об этом.

Answer 1

Я немного изменил ваш код, как показано ниже, что должно помочь вам сделать то, что вы хотите. Вероятная проблема с вашим кодом заключалась в том, что window.addEventListener («загрузка» происходит только один раз, когда страница полностью загружена.

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>