🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Доступно в Baseline в статусе «Widely Available» с 2021-09-25

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

Пример: чтобы наблюдать за элементом с классом видимый-элемент:

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('Элемент виден на экране');
    }
  });
});

const target = document.querySelector('.видимый-элемент');
observer.observe(target);

Это позволяет эффективно отслеживать изменение видимости элементов без частых событий прокрутки или затратных проверок.

Больше обзоров веб-функций — в телеграм-канале HTML Academy.

Нашли ошибку или опечатку? Напишите нам.