Отслеживание позиции элемента

createElementTracker(element) — отслеживает позицию элемента относительно viewport (его прямоугольник, насколько он уже прошёл через область видимости и расстояние от центра viewport), обновляется на общем цикле requestAnimationFrame.

function createElementTracker(element: HTMLElement): ElementTracker

Возвращаемое значение

getState()

() => ElementTrackerState

Синхронно читает текущее состояние, без подписки.

subscribe(callback)

(callback: (state: ElementTrackerState) => void) => () => void

Сразу вызывает callback с текущим состоянием, затем — только когда состояние реально изменилось (поверхностное сравнение полей — без уведомления на тике rAF, где ничего не сдвинулось). Возвращает функцию отписки.

destroy()

() => void

ElementTrackerState

Поле	Тип	Примечание
rect	DOMRectLike	Простой снапшот { top, left, right, bottom, width, height } из getBoundingClientRect().
viewportProgress	number	0..1 — от появления элемента у нижнего края viewport до ухода за верхний край.
distanceFromCenter	number	Смещение в пикселях между вертикальным центром элемента и вертикальным центром viewport — отрицательное, если элемент выше центра.

Без window (серверный рендеринг) возвращается статичный трекер, чьё состояние всегда { rect: { top: 0, left: 0, right: 0, bottom: 0, width: 0, height: 0 }, viewportProgress: 0, distanceFromCenter: 0 }.

Пример:

import { createElementTracker } from '@macrulez/inview-core'

const tracker = createElementTracker(document.querySelector('#card')!)

tracker.subscribe((state) => {
  console.log(`${Math.round(state.viewportProgress * 100)}% через viewport`)
})

Нужна реактивная версия или готовый параллакс-эффект? Смотрите Позиция элемента во viewport и Параллакс-слой для Vue, или React-хуки для React.