Как закрашивать элемент при пересечении жёлтой линии (intersactionObserver)?

Question

[historydev]

Каллбэк почему-то сразу отрабатывает для всех, при установке. Вывожу в логи индекс, сначала он пробегается по всем, следом если скроллить индекс 0-1.

Answer 1

[RAX7]

const container = document.querySelector('.container');
const line = document.querySelector('.invisibility');

const marginBottom = line.getBoundingClientRect().top - container.getBoundingClientRect().bottom;

const options = {
  root: document.querySelector('.container'),
  rootMargin: `0px 0px ${marginBottom}px 0px`,
  threshold: 0
}

const callback = function(entries, observer) {
  entries.forEach((entry) => {
    entry.target.style.background = entry.isIntersecting ? 'green' : 'red';
  });
};

const observer = new IntersectionObserver(callback, options);

container.querySelectorAll('.item').forEach(item => {
  observer.observe(item);
});

Comments

[historydev]

Спасибо