Как следить за всей страницей разом через IntersectionObserver?

Для того чтобы следить за всей страницей разом с помощью IntersectionObserver в JavaScript, вам понадобится следующий подход:

1. Инициализация IntersectionObserver:

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    // Ваш код обработки видимости элементов
  });
}, { root: null, rootMargin: '0px', threshold: 1.0 });

2. Настройка параметров IntersectionObserver:

- root - корневой элемент, относительно которого производится наблюдение. Значение null указывает на viewport страницы.
- rootMargin - отступы от корневого элемента, в формате "Xpx Ypx". Можно использовать отрицательные значения.
- threshold - порог видимости от 0 до 1.0, при достижении которого будет вызван колбэк.

3. Наблюдение за всеми элементами на странице:

document.querySelectorAll('*').forEach(element => {
  observer.observe(element);
});

Этот код будет слежение за всеми элементами на странице. При возникновении видимости каждого из элементов, будет вызван указанный колбэк.

4. Обработка видимости элементов:

const handleVisibility = (isVisible, entry) => {
  if (isVisible) {
    // Элемент стал видимым
    console.log('Element is visible:', entry.target);
  } else {
    // Элемент стал невидимым
    console.log('Element is not visible:', entry.target);
  }
};

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      handleVisibility(true, entry);
    } else {
      handleVisibility(false, entry);
    }
  });
}, { root: null, rootMargin: '0px', threshold: 1.0 });

5. Отписка от IntersectionObserver при необходимости:

observer.disconnect();

Это необходимо для освобождения ресурсов и предотвращения лишнего вызова колбэка при изменении страницы.

Таким образом, вы сможете следить за всей страницей разом с помощью IntersectionObserver в JavaScript, обрабатывая видимость элементов и выполняя нужные действия.