Intersection Observer API
Itersection Observer API - это API браузера, позволяющий наблюдать за пересечениями элементов. Например, карточка оплаты на странице оплаты по мере прокрутки страницы пересекает верхнюю и/или нижнюю часть основного контента страницы. Данное API браузера позволяет отследить эти пересечения. В проекте для упрощения работы с ним используется пакет https://www.npmjs.com/package/@ng-web-apis/intersection-observer
Что требуется знать для работы с этой библиотекой
Использование IntersectionObserverAPI можно конфигурировать. Настраиваемые параметры:
- root - тот элемент, который будет отслеживаться браузером. Если не указан, по дефолту считается viewport’ом браузерного окна.
- rootMargin - смещение прямоугольника root-элемента. С помощью этого параметра можно сжать root-элемент. Дефолтное значение 0px 0px 0px 0px.
- thresholds - массив значений, при которых должны срабатывать callback-пересечения. Указывается в процентах (0.15 - 15%, .5 - 50%: означает, что при пересечении целевого элемента вверх или вниз от root-элемента при 15% или 50% будет срабатывать событие callback’а). Важно: событие происходит при примерном пересечении целевого элемента границ root-элемента.
При использовании провайдеров используются следующие токены
INTERSECTION_THRESHOLD
Использование:
INTERSECTION_ROOT_MARGIN
Использование:
IntersectionObserverService
Данный сервис унаследован Observable<IntersectionObserverEntry[]> и является основной единицей использования при отслеживании пересечения элементов:
Важно: если элемент при создании содержит высоту, равную 0px - следует оформлять подписку на entries$ в ngAfterViewInit.
Объект IntersectionObserverEntry поставляется из entries$ и имеет следующие свойства:
-
boundingClientRect - Возвращает прямоугольник границ таргет-элемента в виде. Границы вычисляются, как описано в документации для Element.getBoundingClientRect().
-
intersectionRatio - Возвращает отношение intersectionRect к boundingClientRect.
-
intersectionRect - Возвращает границы, представляющие видимую область таргет-элемента.
-
isIntersecting - Булево значение, которое является истинным, если таргет элемент пересекается с root-элементом. Если это значение истинно, то запись IntersectionObserverEntry описывает переход в состояние пересечения; если оно ложно, то переход происходит от пересечения к непересечению.
-
rootBounds - Возвращает границы для root - элемента.
-
target - Таргет - элемент.
-
time - Указывает время, в которое было зарегистрировано пересечение, относительно начала отсчета времени жизни IntersectionObserver.