IntersectionObserver для эффектов при прокрутке

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

Функция обратного вызова получает массив объектов IntersectionObserverEntry — по одному для каждого наблюдаемого элемента. Каждая запись содержит логическое значение isIntersecting (равно true, когда элемент виден) и число intersectionRatio от 0 до 1 (доля элемента, видимая в данный момент). Используйте их, чтобы определить состояние видимости.

Создайте наблюдатель внутри useEffect и вызовите observer.observe(ref.current), чтобы начать отслеживать элемент. Ссылка ref должна быть прикреплена к элементу DOM, который Вы хотите отслеживать. Создавайте наблюдатель после монтирования компонента, чтобы значение ref.current уже было заполнено.

В функции очистки useEffect вызовите observer.unobserve(element), чтобы прекратить отслеживание определённого элемента, или observer.disconnect(), чтобы остановить все наблюдения. Если забыть об очистке, наблюдатель продолжит работу после размонтирования компонента, что может привести к ошибкам или утечкам памяти.

Параметр threshold определяет, когда срабатывает функция обратного вызова. Значение 0 вызывает её, как только становится виден хотя бы один пиксель элемента. Значение 1 вызывает её только после полной видимости элемента. Можно также передать массив, например [0, 0.5, 1], чтобы получать вызовы при нескольких уровнях видимости.

rootMargin расширяет или уменьшает эффективную область пересечения с помощью синтаксиса, похожего на CSS: '100px 0px' вызывает функцию за 100px до того, как элемент войдёт в область просмотра. Используйте '-100px', чтобы вызывать её только после того, как элемент окажется на 100px внутри области просмотра. Это полезно для предварительной загрузки или запуска анимации до того, как элемент станет полностью видимым.

Чтобы загружать изображения отложенно, сначала задайте атрибут data-src вместо src. Когда наблюдатель срабатывает при isIntersecting: true, скопируйте data-src в src, чтобы инициировать сетевой запрос. Затем вызовите observer.unobserve(entry.target), поскольку изображение нужно загрузить только один раз.

Для анимаций плавного появления добавьте класс CSS, когда значение isIntersecting становится равным true: element.classList.add('visible'). Задайте переход в CSS: .card { opacity: 0; transform: translateY(20px); transition: opacity 0.4s, transform 0.4s; } и .card.visible { opacity: 1; transform: none; }. Наблюдатель эффективно запускает анимацию.

IntersectionObserver идеально подходит для отслеживания просмотров. Когда элемент с атрибутом data-analytics-id попадает в область пересечения при пороге 0.5, сгенерируйте событие аналитики. Это точно показывает, какие разделы содержимого пользователи действительно прочитали, и гораздо надёжнее, чем простое измерение процента прокрутки.

Один экземпляр IntersectionObserver может наблюдать за несколькими элементами: для каждого из них вызовите observer.observe(element). Все наблюдаемые элементы используют одну и ту же функцию обратного вызова и одни и те же параметры. Используйте entry.target внутри функции обратного вызова, чтобы определить, какой элемент вызвал уведомление.

Многоразовый хук useInView возвращает [ref, inView]. Присоедините ref к любому элементу и считывайте inView, чтобы узнать, виден ли он в данный момент. Хук принимает объект options для порога и rootMargin. Эта абстракция делает эффекты прокрутки декларативными в любом компоненте.

Что означает порог IntersectionObserver, равный 0?

IntersectionObserver эффективно отслеживает видимость элементов с помощью isIntersecting и intersectionRatio. Всегда выполняйте очистку с помощью unobserve или disconnect. Используйте threshold, чтобы управлять точкой срабатывания, а rootMargin — чтобы расширить зону обнаружения. Применяйте его для отложенной загрузки, анимаций и отслеживания аналитики.