internals

Use scroll Position

Composable use-scroll-position() — VueUse-порт одноимённого хука ReUI.

Загрузка превью…

src/composables/use-scroll-position.ts

/**
 * Порт `useScrollPosition` (registry-reui/bases/radix/hooks/use-scroll-position.ts, MIT)
 * поверх `useScroll` из `@vueuse/core` (см. docs/PORTING.md, раздел 2).
 *
 * Оригинал принимает `{ targetRef }` (React `RefObject`, `undefined`/`null`
 * значение внутри трактуется как "документ") и возвращает голое число
 * (`useState`, обновляемое на `scroll`). Здесь `targetRef` — Vue
 * `MaybeRefOrGetter` на элемент/`Document`, а возвращаемое значение —
 * реактивный `Ref<number>` (аналог значения из `useState`, но живой —
 * читается как `.value`, а не пересоздаётся на каждый рендер).
 *
 * Правило 4a: поведение "нет `targetRef` → документ" сохранено буквально.
 */
import { computed, type MaybeRefOrGetter, toValue } from "vue"
import { useScroll } from "@vueuse/core"

export interface UseScrollPositionOptions {
  targetRef?: MaybeRefOrGetter<HTMLElement | Document | null | undefined>
}

export function useScrollPosition({ targetRef }: UseScrollPositionOptions = {}) {
  const target = computed(() => {
    const el = toValue(targetRef)
    // Как и в оригинале: нет ref / ref.current === null/undefined → документ,
    // а для документа читаем позицию у window, а не у самого document.
    if (!el || el === document) {
      return window
    }
    return el
  })

  const { y } = useScroll(target)

  return y
}

Установка

npx shadcn-vue@latest add https://revueui.rootapi.dev/r/use-scroll-position.json

npm-зависимости

  • @vueuse/core

Источник: порт из ReUI (Keenthemes, MIT)