VueCraft NPM

Реактивное состояние скролла ​

useScroll(target?, options?) — реактивное состояние скролла для окна или прокручиваемого элемента. SSR-safe: подписывается лениво, как только target разрешается в реальный элемент на клиенте.

ts
function useScroll(
  target?: MaybeRefOrGetter<Window | HTMLElement | null | undefined>,
  options?: UseScrollOptions,
): UseScrollReturn

target по умолчанию — window на клиенте (undefined при SSR). Передача рефа/геттера (а не просто элемента) позволяет target меняться после монтирования — composable пересоздаёт подписку, когда это происходит.

Тонкая реактивная обёртка над createScrollEngine() — что означает каждое поле, смотрите на этой странице.

Опции ​

idleTimeout ​

number · по умолчанию: 150

Передаётся напрямую в движок.

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

x ​

Ref<number>

y ​

Ref<number>

direction ​

Ref<'up' | 'down' | 'left' | 'right' | null>

progress ​

Ref<number>

velocity ​

Ref<number>

isScrolling ​

Ref<boolean>

scrollTo ​

(position: number | { x?: number; y?: number }, options?: ScrollToOptions) => void

Пример:

vue
<script setup>
import { useScroll } from '@macrulez/inview-vue'

const { y, direction, isScrolling, scrollTo } = useScroll()
</script>

<template>
  <button @click="scrollTo(0)">Наверх</button>
  <p v-if="isScrolling">Скролл {{ direction }}, на {{ y }}px</p>
</template>

options захватываются один раз, в момент вызова — их изменение позже не реконфигурирует уже запущенный движок реактивно (только изменение target пересоздаёт его).