Какие API браузера используются для отслеживания видимости элементов?

Отслеживание видимости элементов важно для lazy loading, виртуализации и аналитики.

Основной API: IntersectionObserver

IntersectionObserver сообщает:

• когда элемент входит в область видимости

• насколько он видим (intersection ratio)

• относительно какого контейнера считается видимость

Ключевые особенности:

• работает асинхронно

• не требует ручной обработки scroll-событий

• оптимизирован на уровне браузера

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // элемент виден
    }
  })
})

observer.observe(element)

Альтернативные подходы

1. Scroll + getBoundingClientRect

   • ручной расчёт координат

   • высокая частота вызовов

   • риск проблем с производительностью

2. ResizeObserver (косвенно)

   • отслеживает изменение размеров

   • используется совместно с IntersectionObserver

3. Visibility API

   • определяет, активна ли вкладка

   • не про элементы, а про страницу целиком

Когда что использовать

• lazy loading изображений → IntersectionObserver

• аналитика просмотра блоков → IntersectionObserver

• простые сценарии → getBoundingClientRect (с осторожностью)

Краткий вывод

IntersectionObserver — стандартный и наиболее эффективный способ отслеживать видимость элементов. Ручные решения через scroll подходят только для простых или специфических случаев.