VueCraft NPM

Позиция элемента во viewport ​

useElementViewport(target, options?) — реактивная позиция элемента относительно viewport: его прямоугольник, viewportProgress и distanceFromCenter, обновляется на общем цикле requestAnimationFrame. Передайте root, чтобы считать позицию относительно прокручиваемого контейнера вместо окна.

ts
function useElementViewport(
  target: MaybeRefOrGetter<HTMLElement | null | undefined>,
  options?: UseElementViewportOptions,
): UseElementViewportReturn

interface UseElementViewportOptions {
  root?: MaybeRefOrGetter<HTMLElement | null | undefined> // по умолчанию null (окно)
}

Тонкая реактивная обёртка над createElementTracker() — что именно означает каждое поле и как оно вычисляется, включая то, как root меняет рамку для viewportProgress/distanceFromCenter, пока rect остаётся привязанным к окну, смотрите на этой странице. Изменение target или root вызывает переподписку.

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

rect ​

Ref<DOMRectLike>

Значение по умолчанию (до разрешения target, или при SSR): { top: 0, left: 0, right: 0, bottom: 0, width: 0, height: 0 }.

viewportProgress ​

Ref<number>

0..1, от появления элемента у нижнего края viewport до ухода за верхний край.

distanceFromCenter ​

Ref<number>

Пример:

vue
<script setup lang="ts">
import { ref, computed } from 'vue'
import { useElementViewport } from '@macrulez/inview-vue'

const section = ref<HTMLElement | null>(null)
const { viewportProgress } = useElementViewport(section)
const opacity = computed(() => Math.min(1, viewportProgress.value * 2))
</script>

<template>
  <section ref="section" :style="{ opacity }">...</section>
</template>

Отслеживание внутри прокручиваемой панели вместо окна:

vue
<script setup lang="ts">
const panel = ref<HTMLElement | null>(null)
const widget = ref<HTMLElement | null>(null)
const { viewportProgress } = useElementViewport(widget, { root: panel })
</script>

За готовым параллакс-эффектом на основе этих же данных — смотрите Параллакс-слой.