🖥 Intersection Observer

Intersection Observer — это интерфейс, позволяющий отслеживать, когда элемент появляется в зоне видимости, перекрывает другой элемент или выходит за границы видимой области (viewport). Он предоставляет эффективный способ наблюдения за видимостью элементов, чем старые методы вроде событий прокрутки и проверки getBoundingClientRect(), так как не вызывает перерисовку и работает асинхронно.

Intersection Observer полезен, если нужно:
- отслеживать появление элементов на экране (например, для ленивой загрузки изображений);
- анимировать элементы при их появлении в зоне видимости;
- отслеживать видимость рекламы или элементов пользовательского интерфейса.

Создание Intersection Observer

Создать Intersection Observer можно с помощью конструктора IntersectionObserver, в который передается колбэк-функция. Эта функция будет вызываться с массивом записей (IntersectionObserverEntry), описывающих пересечения.

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    console.log(entry);
  });
});

Каждый объект entry в entries содержит информацию о пересечении, включая:
- isIntersecting — флаг, указывающий, находится ли элемент в зоне видимости;
- target — целевой элемент, для которого произошло пересечение;
- intersectionRatio — процент видимой части элемента;
- boundingClientRect — размеры и положение целевого элемента относительно видимой области.

Начало наблюдения

Чтобы начать наблюдение, нужно использовать метод observe и указать целевой элемент:

const targetNode = document.getElementById('targetElement');
observer.observe(targetNode);

Остановка наблюдения

Когда больше не нужно отслеживать пересечения, можно остановить наблюдение с помощью метода unobserve() или полностью прекратить работу с disconnect():

observer.unobserve(targetNode);
observer.disconnect();

Полезные параметры конфигурации

При создании IntersectionObserver можно указать дополнительные настройки, которые управляют его поведением:
- root: элемент, который будет использоваться в качестве контейнера для отслеживания видимости. По умолчанию — null, то есть будет использоваться viewport.
- rootMargin: отступы вокруг root, которые позволяют изменять зону видимости (например, rootMargin: "0px 0px -50% 0px").
- threshold: массив значений (от 0 до 1), задающий, какой процент видимости элемента должен быть достигнут, чтобы вызвался колбэк. Например, threshold: [0, 0.5, 1] вызовет колбэк при 0%, 50%, и 100% видимости.

#javascript #intersection_observer