refactor: simplify scroll handling logic and improve buffer height ca…

…lculation
hsa00000 · Jan 10, 2025 · 4433a1e · 4433a1e
1 parent e3e6793
commit 4433a1e
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 10 deletions.
diff --git a/gallery-frontend/src/components/Home/Page/Home.vue b/gallery-frontend/src/components/Home/Page/Home.vue
@@ -14,9 +14,7 @@
     :class="stopScroll ? 'overflow-y-hidden' : 'overflow-y-scroll'"
     @scroll="
       // If prefetchStore.locateTo triggers initializeScrollPosition, prevent the user from triggering the scrolling function.
-      prefetchStore.totalHeight - windowHeight > 0 && prefetchStore.locateTo === null
-        ? throttledHandleScroll()
-        : () => {}
+      prefetchStore.locateTo === null ? throttledHandleScroll() : () => {}
     "
   >
     <Buffer
@@ -138,13 +136,9 @@ const resizeDebounce = debounce(() => {
 }, 100)
 
 const bufferHeight = computed(() => {
-  if (prefetchStore.totalHeight <= windowHeight.value) {
-    return 0
-  } else {
-    return 600000
-    // A large value to enable scrolling within the imageContainer without reaching the top or bottom prematurely.
-    // This value must be a multiple of 3 to avoid pixel misalignment when dividing bufferHeight by 3 (in useInitializeScrollPosition.ts).
-  }
+  return 600000
+  // A large value to enable scrolling within the imageContainer without reaching the top or bottom prematurely.
+  // This value must be a multiple of 3 to avoid pixel misalignment when dividing bufferHeight by 3 (in useInitializeScrollPosition.ts).
 })
 
 const albumHomeIsolatedKey = computed(() => {

diff --git a/gallery-frontend/src/components/hook/useHandleScroll.ts b/gallery-frontend/src/components/hook/useHandleScroll.ts
@@ -32,7 +32,16 @@ export function handleScroll(
       if (imageContainerRef.value !== null) {
         const scrollTopStore = useScrollTopStore(isolationId)
         const prefetchStore = usePrefetchStore(isolationId)
+
         const difference = imageContainerRef.value.scrollTop - lastScrollTop.value
+
+        if (prefetchStore.totalHeight - windowHeight.value < 0) {
+          scrollTopStore.scrollTop = 0
+          imageContainerRef.value.scrollTop -= difference
+          lastScrollTop.value = imageContainerRef.value.scrollTop
+          return
+        }
+
         const result = scrollTopStore.scrollTop + difference
 
         if (result < 0) {