IntersectionObserver: наблюдение за пересечением области просмотра

Назначение

IntersectionObserver сообщает об изменении пересечения элемента с областью наблюдения. Он помогает запускать отложенную работу без постоянного ручного измерения геометрии на каждом событии прокрутки.

Как это работает

В собственном длинном документе создайте секцию id observed-lesson. Пример использует viewport как root и порог четверти площади элемента. Callback получает набор записей; после первого подходящего пересечения наблюдение за секцией прекращается.

Пример

const target = document.querySelector("#observed-lesson");
const observer = new IntersectionObserver(entries => {
  for (const entry of entries) {
    if (entry.isIntersecting && entry.intersectionRatio >= 0.25) {
      console.log("Достигнут порог пересечения");
      observer.unobserve(entry.target);
    }
  }
}, {threshold:0.25});
observer.observe(target);
// При удалении компонента вызовите observer.disconnect().

Что должно получиться

Сообщение появляется, когда наблюдаемая секция достигает заданного пересечения. Первое уведомление может прийти и сразу после начала наблюдения, поэтому состояние проверяется внутри callback.

Граница применения и частая ошибка

Обычное пересечение не доказывает, что пользователь прочитал текст или что его не перекрывает другой элемент. У очень высокого блока четверть площади может никогда не попасть в небольшой viewport. API не предназначен для точного покадрового движения анимации.

Самостоятельная проверка

Проверьте секцию выше и ниже первого экрана, затем увеличьте её высоту. Объясните, достижим ли порог. Попробуйте другой root в отдельной прокручиваемой области и сравните наблюдаемое поведение.

Связанные материалы

• Коллекции DOM
• Очистка обработчиков
• Безопасное обновление страницы