|
| 1 | +// Easing function for the scroll animation |
| 2 | +const easeOutQuad = (t: number) => t * (2 - t) |
| 3 | + |
| 4 | +export const SCROLL_TO_TOP_THRESHOLD = 300 |
| 5 | +const SCROLL_TO_TOP_DURATION = 500 |
| 6 | + |
| 7 | +/** |
| 8 | + * Scroll to the top of the page with a smooth animation. |
| 9 | + * @param options - Configuration options for the scroll animation. |
| 10 | + * @returns An object containing the scrollToTop function and a cancel function. |
| 11 | + */ |
| 12 | +export const useScrollToTop = createSharedComposable(function useScrollToTop() { |
| 13 | + // Check if prefers-reduced-motion is enabled |
| 14 | + const preferReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)') |
| 15 | + |
| 16 | + /** |
| 17 | + * Active requestAnimationFrame id for the current auto-scroll animation |
| 18 | + */ |
| 19 | + let rafId: number | null = null |
| 20 | + const isScrolling = ref(false) |
| 21 | + |
| 22 | + /** |
| 23 | + * Stop any in-flight auto-scroll before starting a new one. |
| 24 | + */ |
| 25 | + function cancel() { |
| 26 | + if (rafId !== null) { |
| 27 | + cancelAnimationFrame(rafId) |
| 28 | + rafId = null |
| 29 | + } |
| 30 | + isScrolling.value = false |
| 31 | + } |
| 32 | + |
| 33 | + // Cancel scroll on user interaction |
| 34 | + const onInteraction = () => { |
| 35 | + if (isScrolling.value) { |
| 36 | + cancel() |
| 37 | + } |
| 38 | + } |
| 39 | + |
| 40 | + if (import.meta.client) { |
| 41 | + const listenerOptions = { passive: true } |
| 42 | + useEventListener(window, 'wheel', onInteraction, listenerOptions) |
| 43 | + useEventListener(window, 'touchstart', onInteraction, listenerOptions) |
| 44 | + useEventListener(window, 'mousedown', onInteraction, listenerOptions) |
| 45 | + } |
| 46 | + |
| 47 | + function scrollToTop() { |
| 48 | + cancel() |
| 49 | + |
| 50 | + if (preferReducedMotion.value) { |
| 51 | + window.scrollTo({ top: 0, behavior: 'instant' }) |
| 52 | + return |
| 53 | + } |
| 54 | + |
| 55 | + const start = window.scrollY |
| 56 | + if (start <= 0) return |
| 57 | + |
| 58 | + isScrolling.value = true |
| 59 | + |
| 60 | + const startTime = performance.now() |
| 61 | + const change = -start |
| 62 | + |
| 63 | + // Start the frame-by-frame scroll animation. |
| 64 | + function animate() { |
| 65 | + const elapsed = performance.now() - startTime |
| 66 | + const t = Math.min(elapsed / SCROLL_TO_TOP_DURATION, 1) |
| 67 | + const y = start + change * easeOutQuad(t) |
| 68 | + |
| 69 | + window.scrollTo({ top: y }) |
| 70 | + |
| 71 | + if (t < 1 && isScrolling.value) { |
| 72 | + rafId = requestAnimationFrame(animate) |
| 73 | + } else { |
| 74 | + cancel() |
| 75 | + } |
| 76 | + } |
| 77 | + |
| 78 | + rafId = requestAnimationFrame(animate) |
| 79 | + } |
| 80 | + |
| 81 | + tryOnScopeDispose(cancel) |
| 82 | + |
| 83 | + const isTouchDeviceClient = shallowRef(false) |
| 84 | + onMounted(() => { |
| 85 | + isTouchDeviceClient.value = isTouchDevice() |
| 86 | + }) |
| 87 | + |
| 88 | + return { |
| 89 | + scrollToTop, |
| 90 | + cancel, |
| 91 | + isTouchDeviceClient, |
| 92 | + } |
| 93 | +}) |
0 commit comments