VueCraft NPM

Reactive Scroll State ​

useScroll(target?, options?) — reactive scroll state for the window or a scrollable element. SSR-safe: subscribes lazily once target resolves to a real element on the client.

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

target defaults to window on the client (undefined during SSR). Passing a ref/getter (not just a plain element) lets target change after mount — the composable tears down and re-subscribes when it does.

A thin reactive wrapper over createScrollEngine() — see that page for what each field actually means.

Options ​

idleTimeout ​

number · default: 150

Passed straight through to the underlying engine.

Return value ​

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

Example:

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

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

<template>
  <button @click="scrollTo(0)">Back to top</button>
  <p v-if="isScrolling">Scrolling {{ direction }}, at {{ y }}px</p>
</template>

options is captured once, at the call site — changing it later doesn't reactively reconfigure an already-running engine (only a target change does, since that tears down and recreates it).