Что такое Intersection Observer?

Intersection Observer — это браузерный API, который асинхронно отслеживает пересечение элемента с областью просмотра (viewport) или контейнером, без обработчиков скролла.

Зачем нужен

Раньше «видимость» элемента отслеживали через scroll + getBoundingClientRect, что дорого (постоянные вычисления, reflow). Intersection Observer делает это эффективно и асинхронно.

Как использовать

const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        console.log('элемент виден');
      }
    });
  },
  { threshold: 0.5 }, // сработать при 50% видимости
);

observer.observe(document.querySelector('.target'));

• threshold — доля видимости для срабатывания (0–1).
• root — контейнер (по умолчанию viewport).
• rootMargin — отступы для «раннего» срабатывания.

Применение

• Ленивая загрузка изображений и контента.
• Бесконечный скролл (подгрузка при приближении к концу).
• Анимации при появлении в зоне видимости.
• Подсчёт показов рекламы, аналитика.

Преимущества

• Не блокирует основной поток, без дорогих обработчиков скролла.
• Браузер оптимизирует вычисления.

Коротко для собеседования

Intersection Observer асинхронно отслеживает пересечение элемента с viewport/контейнером без обработчиков скролла. Настраивается threshold/root/rootMargin. Применяют для ленивой загрузки, бесконечного скролла, анимаций появления и аналитики. Эффективнее scroll + getBoundingClientRect.