API IntersectionObserver и пороговые значения

IntersectionObserver вызывает обратные вызовы, когда элемент входит в область просмотра или покидает её (либо пересекает другой контейнер прокрутки). Это современная и производительная альтернатива обработчикам прокрутки — браузер выполняет вычисления, а ваш код запускается только при фактических изменениях видимости.

new IntersectionObserver(callback, options) создаёт observer. Обратный вызов получает массив объектов entry, когда пересечения изменяются; параметры определяют, какой контейнер отслеживается и при каких порогах.

У каждого объекта entry есть target (наблюдаемый элемент), isIntersecting (логическое значение), intersectionRatio (от 0 до 1), boundingClientRect, intersectionRect и time. Используйте isIntersecting для двоичной проверки видимости, а intersectionRatio — для логики, зависящей от процента видимой области.

{ threshold: 0.5 } вызывает обратный вызов каждый раз, когда коэффициент пересечения пересекает отметку 50%. Используйте массив [0, 0.25, 0.5, 0.75, 1], чтобы срабатывание происходило при каждом шаге в четверть — это удобно для создания индикаторов прогресса или аналитики, сообщающей «процент видимости».

По умолчанию observer измеряет пересечение с областью просмотра. Установите root: someScrollableDiv, чтобы измерять его относительно внутреннего контейнера прокрутки — например, виртуализированного списка внутри элемента фиксированной высоты.

rootMargin: "200px" увеличивает область наблюдения на 200 пикселей с каждой стороны. Используйте его, чтобы срабатывание происходило раньше (начинайте загружать изображения за 200 пикселей до их появления в области просмотра) или позже (срабатывайте только когда элемент полностью покинул область просмотра).

observer.observe(element) начинает наблюдение за элементом, а observer.unobserve(element) прекращает его. Всегда прекращайте наблюдение, когда обратный вызов больше не нужен (например, после однократного запуска отложенной загрузки), чтобы освободить память.

observer.disconnect() прекращает наблюдение за всеми отслеживаемыми элементами. Вызывайте его при размонтировании компонента или когда observer больше не нужен — это предотвращает утечки, вызванные observer, продолжающими работать после завершения сценария.

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

Когда вы начинаете наблюдать за новым элементом, обратный вызов срабатывает почти немедленно один раз с его текущим состоянием — это удобно для обработки элементов, уже видимых в момент начала наблюдения, без отдельного пути инициализации.

Отложенная загрузка изображений, запуск анимаций при появлении в области просмотра, бесконечная прокрутка (наблюдение за sentinel рядом с концом списка), отслеживание статей, которые пользователь действительно прочитал, переключение липкого заголовка в зависимости от видимости главного блока.

В чём разница между порогом 0 и порогом 1 в IntersectionObserver?

IntersectionObserver вызывает обратные вызовы при изменениях видимости элементов, обеспечивая производительность и пакетную обработку, — заменяйте им обработчики прокрутки в логике видимости. Настройте его с помощью порога (от 0 до 1 или массива), корневого элемента (пользовательского контейнера прокрутки) и rootMargin (увеличение или уменьшение наблюдаемой области). Используйте observe/unobserve для отдельных элементов; disconnect очищает всё.