feat(desktop): integrate useSmoothScroll hook for enhanced scrolling

Innei · Innei · commit 19479f50a696 · 2025-05-26T17:10:03.000+08:00
- Introduced a new `useSmoothScroll` hook to encapsulate smooth scrolling logic, improving code reusability.
- Updated `EntryScrollArea` to utilize the new hook, replacing the previous inline smooth scroll implementation.
- Exported the `useSmoothScroll` hook from the hooks index for broader accessibility.

Signed-off-by: Innei &lt;tukon479@gmail.com&gt;
diff --git a/apps/desktop/layer/renderer/src/modules/entry-content/index.electron.tsx b/apps/desktop/layer/renderer/src/modules/entry-content/index.electron.tsx
@@ -8,7 +8,7 @@ import { MotionButtonBase } from "@follow/components/ui/button/index.js"
 import { RootPortal } from "@follow/components/ui/portal/index.js"
 import { ScrollArea } from "@follow/components/ui/scroll-area/index.js"
 import type { FeedViewType } from "@follow/constants"
-import { useTitle } from "@follow/hooks"
+import { useSmoothScroll, useTitle } from "@follow/hooks"
 import type { FeedModel, InboxModel } from "@follow/models/types"
 import { nextFrame, stopPropagation } from "@follow/utils/dom"
 import { EventBus } from "@follow/utils/event-bus"
@@ -17,7 +17,7 @@ import { ErrorBoundary } from "@sentry/react"
 import type { JSAnimation, Variants } from "motion/react"
 import { AnimatePresence, m, useAnimationControls } from "motion/react"
 import * as React from "react"
-import { useCallback, useEffect, useMemo, useRef, useState } from "react"
+import { useEffect, useMemo, useRef, useState } from "react"
 
 import { useEntryIsInReadability } from "~/atoms/readability"
 import { useIsZenMode, useUISettingKey } from "~/atoms/settings/ui"
@@ -247,7 +247,7 @@ const EntryScrollArea: Component<{
   }
   return (
     <ScrollArea.ScrollArea
-      focusable={false}
+      focusable
       mask={false}
       rootClassName={cn(
         "h-0 min-w-0 grow overflow-y-auto print:h-auto print:overflow-visible",
@@ -346,65 +346,7 @@ const RegisterCommands = ({
   })
 
   const { highlightBoundary } = useFocusActions()
-
-  // Smooth scroll implementation similar to Vimium
-  const smoothScrollTo = useCallback(
-    (targetScrollTop: number, element: HTMLDivElement) => {
-      // Stop any existing animation
-      if (scrollAnimationRef.current) {
-        scrollAnimationRef.current.stop()
-      }
-
-      const startScrollTop = element.scrollTop
-      const distance = targetScrollTop - startScrollTop
-
-      // If distance is very small, just set it directly
-      if (Math.abs(distance) < 1) {
-        element.scrollTop = targetScrollTop
-        scrollAnimationRef.current = null
-        return
-      }
-
-      // Adaptive duration based on distance - shorter for small distances, longer for large ones
-      const baseDuration = 150
-      const maxDuration = 300
-      const duration = Math.min(maxDuration, baseDuration + Math.abs(distance) * 0.5)
-      const startTime = performance.now()
-
-      // Easing function similar to Vimium's smooth scrolling - ease out cubic for natural feel
-      const easeOutCubic = (t: number): number => {
-        return 1 - Math.pow(1 - t, 3)
-      }
-
-      let animationId: number
-
-      const animateScroll = (currentTime: number) => {
-        const elapsed = currentTime - startTime
-        const progress = Math.min(elapsed / duration, 1)
-
-        const easedProgress = easeOutCubic(progress)
-        const currentScrollTop = startScrollTop + distance * easedProgress
-
-        element.scrollTop = currentScrollTop
-
-        if (progress < 1) {
-          animationId = requestAnimationFrame(animateScroll)
-          scrollAnimationRef.current = {
-            stop: () => {
-              cancelAnimationFrame(animationId)
-              scrollAnimationRef.current = null
-            },
-          } as any
-        } else {
-          scrollAnimationRef.current = null
-        }
-      }
-
-      animationId = requestAnimationFrame(animateScroll)
-    },
-    [scrollAnimationRef],
-  )
-
+  const smoothScrollTo = useSmoothScroll()
   useEffect(() => {
     const checkScrollBottom = ($scroller: HTMLDivElement) => {
       const currentScroll = $scroller.scrollTop
diff --git a/packages/internal/hooks/src/index.ts b/packages/internal/hooks/src/index.ts
@@ -13,6 +13,7 @@ export * from "./usePageVisibility"
 export * from "./usePrevious"
 export * from "./useRefValue"
 export * from "./useSetState"
+export * from "./useSmoothScroll"
 export * from "./useSyncTheme"
 export * from "./useTitle"
 export * from "./useTriangleMenu"
diff --git a/packages/internal/hooks/src/useSmoothScroll.ts b/packages/internal/hooks/src/useSmoothScroll.ts
@@ -0,0 +1,66 @@
+import { useCallback, useRef } from "react"
+
+/**
+ *
+ * Smooth scroll implementation similar to Vimium
+ */
+export const useSmoothScroll = () => {
+  const scrollAnimationRef = useRef<{ stop: () => void } | null>(null)
+
+  return useCallback(
+    (targetScrollTop: number, element: HTMLDivElement) => {
+      // Stop any existing animation
+      if (scrollAnimationRef.current) {
+        scrollAnimationRef.current.stop()
+      }
+
+      const startScrollTop = element.scrollTop
+      const distance = targetScrollTop - startScrollTop
+
+      // If distance is very small, just set it directly
+      if (Math.abs(distance) < 1) {
+        element.scrollTop = targetScrollTop
+        scrollAnimationRef.current = null
+        return
+      }
+
+      // Adaptive duration based on distance - shorter for small distances, longer for large ones
+      const baseDuration = 150
+      const maxDuration = 300
+      const duration = Math.min(maxDuration, baseDuration + Math.abs(distance) * 0.5)
+      const startTime = performance.now()
+
+      // Easing function similar to Vimium's smooth scrolling - ease out cubic for natural feel
+      const easeOutCubic = (t: number): number => {
+        return 1 - Math.pow(1 - t, 3)
+      }
+
+      let animationId: number
+
+      const animateScroll = (currentTime: number) => {
+        const elapsed = currentTime - startTime
+        const progress = Math.min(elapsed / duration, 1)
+
+        const easedProgress = easeOutCubic(progress)
+        const currentScrollTop = startScrollTop + distance * easedProgress
+
+        element.scrollTop = currentScrollTop
+
+        if (progress < 1) {
+          animationId = requestAnimationFrame(animateScroll)
+          scrollAnimationRef.current = {
+            stop: () => {
+              cancelAnimationFrame(animationId)
+              scrollAnimationRef.current = null
+            },
+          } as any
+        } else {
+          scrollAnimationRef.current = null
+        }
+      }
+
+      animationId = requestAnimationFrame(animateScroll)
+    },
+    [scrollAnimationRef],
+  )
+}
