refactor: simplify scroll-to-top visibility and interaction cleanup

Author: RYGRIT

app/components/ScrollToTop.client.vue

@@ -10,29 +10,23 @@ const SCROLL_TO_TOP_DURATION = 500
 
 const isMounted = useMounted()
 const isTouchDeviceClient = shallowRef(false)
-const isVisible = shallowRef(false)
 const scrollThreshold = 300
+const { y: scrollTop } = useScroll(window)
+const isVisible = computed(() => {
+  if (supportsScrollStateQueries.value) return false
+  return scrollTop.value > scrollThreshold
+})
 const { isSupported: supportsScrollStateQueries } = useCssSupports(
   'container-type',
   'scroll-state',
   { ssrValue: false },
 )
 const shouldShowButton = computed(() => isActive.value && isTouchDeviceClient.value)
 
-function onScroll() {
-  if (supportsScrollStateQueries.value) {
-    return
-  }
-  isVisible.value = window.scrollY > scrollThreshold
-}
-
 const { scrollToTop } = useScrollToTop({ duration: SCROLL_TO_TOP_DURATION })
 
-useEventListener('scroll', onScroll, { passive: true })
-
 onMounted(() => {
   isTouchDeviceClient.value = isTouchDevice()
-  onScroll()
 })
 </script>
 
@@ -43,7 +37,7 @@ onMounted(() => {
     type="button"
     class="scroll-to-top-css fixed bottom-4 inset-ie-4 z-50 w-12 h-12 bg-bg-elevated border border-border rounded-full shadow-lg flex items-center justify-center text-fg-muted hover:text-fg transition-colors active:scale-95"
     :aria-label="$t('common.scroll_to_top')"
-    @click="scrollToTop()"
+    @click="() => scrollToTop()"
   >
     <span class="i-lucide:arrow-up w-5 h-5" aria-hidden="true" />
   </button>
@@ -63,7 +57,7 @@ onMounted(() => {
       type="button"
       class="fixed bottom-4 inset-ie-4 z-50 w-12 h-12 bg-bg-elevated border border-border rounded-full shadow-lg flex items-center justify-center text-fg-muted hover:text-fg transition-colors active:scale-95"
       :aria-label="$t('common.scroll_to_top')"
-      @click="scrollToTop()"
+      @click="() => scrollToTop()"
     >
       <span class="i-lucide:arrow-up w-5 h-5" aria-hidden="true" />
     </button>

app/composables/useScrollToTop.ts

@@ -5,6 +5,9 @@ interface UseScrollToTopOptions {
   duration?: number
 }
 
+// Easing function for the scroll animation
+const easeOutQuad = (t: number) => t * (2 - t)
+
 /**
  * Scroll to the top of the page with a smooth animation.
  * @param options - Configuration options for the scroll animation.
@@ -16,24 +19,11 @@ export function useScrollToTop(options: UseScrollToTopOptions) {
   // Check if prefers-reduced-motion is enabled
   const preferReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)')
 
-  // Easing function for the scroll animation
-  const easeOutQuad = (t: number) => t * (2 - t)
-
   /**
    * Active requestAnimationFrame id for the current auto-scroll animation
    */
   let rafId: number | null = null
-  /**
-   * Disposer for temporary interaction listeners attached during auto-scroll
-   */
-  let stopInteractionListeners: (() => void) | null = null
-
-  function cleanupInteractionListeners() {
-    if (stopInteractionListeners) {
-      stopInteractionListeners()
-      stopInteractionListeners = null
-    }
-  }
+  const isScrolling = ref(false)
 
   /**
    * Stop any in-flight auto-scroll before starting a new one.
@@ -43,8 +33,21 @@ export function useScrollToTop(options: UseScrollToTopOptions) {
       cancelAnimationFrame(rafId)
       rafId = null
     }
+    isScrolling.value = false
+  }
+
+  // Cancel scroll on user interaction
+  const onInteraction = () => {
+    if (isScrolling.value) {
+      cancel()
+    }
+  }
 
-    cleanupInteractionListeners()
+  if (import.meta.client) {
+    const listenerOptions = { passive: true }
+    useEventListener(window, 'wheel', onInteraction, listenerOptions)
+    useEventListener(window, 'touchstart', onInteraction, listenerOptions)
+    useEventListener(window, 'mousedown', onInteraction, listenerOptions)
   }
 
   function scrollToTop() {
@@ -58,17 +61,11 @@ export function useScrollToTop(options: UseScrollToTopOptions) {
     const start = window.scrollY
     if (start <= 0) return
 
+    isScrolling.value = true
+
     const startTime = performance.now()
     const change = -start
 
-    const cleanup = [
-      useEventListener(window, 'wheel', cancel, { passive: true }),
-      useEventListener(window, 'touchstart', cancel, { passive: true }),
-      useEventListener(window, 'mousedown', cancel, { passive: true }),
-    ]
-
-    stopInteractionListeners = () => cleanup.forEach(stop => stop())
-
     // Start the frame-by-frame scroll animation.
     function animate() {
       const elapsed = performance.now() - startTime
@@ -77,7 +74,7 @@ export function useScrollToTop(options: UseScrollToTopOptions) {
 
       window.scrollTo({ top: y })
 
-      if (t < 1) {
+      if (t < 1 && isScrolling.value) {
         rafId = requestAnimationFrame(animate)
       } else {
         cancel()
@@ -87,7 +84,7 @@ export function useScrollToTop(options: UseScrollToTopOptions) {
     rafId = requestAnimationFrame(animate)
   }
 
-  onBeforeUnmount(cancel)
+  tryOnScopeDispose(cancel)
 
   return {
     scrollToTop,