Fix initial pager gap after fast scroll (#1868)

bluesky-social · Nov 10, 2023 · 86b4842 · 86b4842
1 parent 91f8a23
commit 86b4842
Showing 1 changed file with 13 additions and 3 deletions.
diff --git a/src/view/com/pager/PagerWithHeader.tsx b/src/view/com/pager/PagerWithHeader.tsx
@@ -138,17 +138,20 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
       })
     }
 
+    const lastForcedScrollY = useSharedValue(0)
     const onScrollWorklet = React.useCallback(
       (e: NativeScrollEvent) => {
         'worklet'
         const nextScrollY = e.contentOffset.y
         scrollY.value = nextScrollY
 
-        if (nextScrollY < headerOnlyHeight) {
+        const forcedScrollY = Math.min(nextScrollY, headerOnlyHeight)
+        if (lastForcedScrollY.value !== forcedScrollY) {
+          lastForcedScrollY.value = forcedScrollY
           const refs = scrollRefs.value
           for (let i = 0; i < refs.length; i++) {
             if (i !== currentPage) {
-              scrollTo(refs[i], 0, nextScrollY, false)
+              scrollTo(refs[i], 0, forcedScrollY, false)
             }
           }
         }
@@ -158,7 +161,14 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
           runOnJS(setIsScrolledDown)(nextIsScrolledDown)
         }
       },
-      [currentPage, headerOnlyHeight, isScrolledDown, scrollRefs, scrollY],
+      [
+        currentPage,
+        headerOnlyHeight,
+        isScrolledDown,
+        scrollRefs,
+        scrollY,
+        lastForcedScrollY,
+      ],
     )
 
     const onPageSelectedInner = React.useCallback(