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.jsonnpm-зависимости
- @vueuse/core
Источник: порт из ReUI (Keenthemes, MIT)