@onekeyfe/react-native-pager-view 3.0.175 → 3.0.177

package/android/src/main/java/com/reactnativepagerview/CollapsiblePagerHost.kt

@@ -123,6 +123,7 @@ class CollapsiblePagerHost(context: Context) : NestedScrollableHost(context), Ne
   private val restoredRecyclerKeys = WeakHashMap<RecyclerView, String>()
   private val originalScrollerPadding = WeakHashMap<ScrollView, ScrollerPadding>()
   private val restoredScrollerKeys = WeakHashMap<ScrollView, String>()
+  private val deferredScrollerGeometry = WeakHashMap<ScrollView, Triple<Int, Int, Int>>()
   private val ownedScrollerKeys = WeakHashMap<NativeScrollerViewport, String>()
   private val ownedScrollerRestoreRequests = HashMap<String, Pair<WeakReference<NativeScrollerViewport>, Int?>>()
   private var foregroundRefreshIndicator: WeakReference<ImageView>? = null
@@ -473,6 +474,14 @@ class CollapsiblePagerHost(context: Context) : NestedScrollableHost(context), Ne
     releaseRefreshForeground()
     val index = logicalChildren.indexOf(child)
     if (index < 0) return
+    if (index >= PAGE_SLOT_OFFSET) {
+      val observed = observedRecyclerView ?: observedOwnedScroller ?: observedNativeScroller
+      val removingObservedPage = observed != null && isDescendant(observed, child)
+      cancelPageTransitionForPageMutation()
+      cancelPagerTop()
+      detachPrimaryScrollObserver(recordOffset = false)
+      if (removingObservedPage) observedPageRemoved = true
+    }
     logicalChildren.removeAt(index)
     when (index) {
       0 -> {
@@ -484,12 +493,6 @@ class CollapsiblePagerHost(context: Context) : NestedScrollableHost(context), Ne
         stickyHeaderView = null
       }
       else -> {
-        val observed = observedRecyclerView ?: observedOwnedScroller ?: observedNativeScroller
-        if (observed != null && isDescendant(observed, child)) {
-          // The page detaches only later; its scroller must not keep writing this key.
-          detachPrimaryScrollObserver(recordOffset = false)
-          observedPageRemoved = true
-        }
         when (val scrollable =
           findExplicitNativeScrollerInView(child) ?: findVerticalScrollableView(child)) {
           is RecyclerView -> restoreRecyclerInsets(scrollable)
@@ -497,14 +500,17 @@ class CollapsiblePagerHost(context: Context) : NestedScrollableHost(context), Ne
           is NativeScrollerViewport -> restoreOwnedScrollerInsets(scrollable)
         }
         adapter.removePage(child)
+        selectedPage = if (adapter.itemCount == 0) 0 else selectedPage.coerceIn(0, adapter.itemCount - 1)
         log("page-detach slot=${index - PAGE_SLOT_OFFSET} nativePages=${adapter.itemCount}")
       }
     }
   }
 
   fun removeAllReactChildren() {
+    cancelPageTransitionForPageMutation()
+    cancelPagerTop()
     releaseRefreshForeground()
-    detachPrimaryScrollObserver()
+    detachPrimaryScrollObserver(recordOffset = false)
     pageRestoreRequests.clear()
     pendingPageRestores.clear()
     commandBodyKeys.clear()
@@ -513,6 +519,7 @@ class CollapsiblePagerHost(context: Context) : NestedScrollableHost(context), Ne
     alignedBodyKeys.clear()
     transitionAlignedViews.clear()
     deferredRecyclerGeometry.clear()
+    deferredScrollerGeometry.clear()
     displayBodyOverrides.clear()
     displayRecyclerAnchors.clear()
     ownedScrollerRestoreRequests.clear()
@@ -532,6 +539,7 @@ class CollapsiblePagerHost(context: Context) : NestedScrollableHost(context), Ne
     stickyHeaderView = null
     logicalChildren.clear()
     adapter.clear()
+    selectedPage = 0
     hasAppliedInitialPage = false
     log("pages-clear")
   }
@@ -540,9 +548,28 @@ class CollapsiblePagerHost(context: Context) : NestedScrollableHost(context), Ne
 
   fun reactChildAt(index: Int) = logicalChildren[index]
 
+  private fun cancelPageTransitionForPageMutation() {
+    if (transitionHeaderOffsets != null) {
+      val keys = transitionAlignedViews.values.toTypedArray().toMutableSet()
+      keys.add(pageKey(transitionSourcePage))
+      transitionTargetPage?.let { keys.add(pageKey(it)) }
+      for (key in keys) {
+        displayBodyOverrides.remove(key)
+        displayRecyclerAnchors.remove(key)
+      }
+    }
+    transitionHeaderOffsets = null
+    transitionPageOffsets = null
+    transitionTargetPage = null
+    transitionSourceRecyclerAnchor = null
+    transitionSourceDisplayBody = 0
+    transitionAlignedViews.clear()
+    resumeTransitionSource = null
+  }
+
   internal fun beginPageTransition(target: Int? = null) {
     cancelPagerTop()
-    if (!nativeSmoothHeaderScrollEnabled || headerHeightPx <= 0) return
+    if (adapter.itemCount == 0 || !nativeSmoothHeaderScrollEnabled || headerHeightPx <= 0) return
     if (transitionHeaderOffsets == null) {
       transitionSourceDisplayBody = primaryScrollableForPage(selectedPage)?.let(::verticalScrollOffset) ?: 0
       transitionSourceRecyclerAnchor = (primaryScrollableForPage(selectedPage) as? RecyclerView)?.let(::captureRecyclerAnchor)
@@ -576,6 +603,11 @@ class CollapsiblePagerHost(context: Context) : NestedScrollableHost(context), Ne
   }
 
   private fun finishPageTransition(position: Int) {
+    if (adapter.itemCount == 0) {
+      cancelPageTransitionForPageMutation()
+      selectedPage = 0
+      return
+    }
     val headers = transitionHeaderOffsets ?: return
     detachPrimaryScrollObserver(recordOffset = false)
     releaseRefreshForeground()
@@ -907,6 +939,7 @@ class CollapsiblePagerHost(context: Context) : NestedScrollableHost(context), Ne
     pendingPageRestores.remove(key)
     ownedScrollerRestoreRequests.remove(key)
     if (view is RecyclerView) deferredRecyclerGeometry.remove(view)
+    if (view is ScrollView) deferredScrollerGeometry.remove(view)
     (view as? NativeScrollerViewport)?.host?.cancelPendingScrollRestore()
     suspendedBodyKeys.remove(key)
     alignedBodyKeys.remove(key)
@@ -985,6 +1018,7 @@ class CollapsiblePagerHost(context: Context) : NestedScrollableHost(context), Ne
     displayRecyclerAnchors.remove(key)
     recyclerReadingAnchors.remove(key)
     if (view is RecyclerView) deferredRecyclerGeometry.remove(view)
+    if (view is ScrollView) deferredScrollerGeometry.remove(view)
     pageOffsets[key] = 0
     val request = PagerTopRequest(view, key, selectedPage, attachmentGeneration, target, ++pagerTopToken)
     pagerTopRequest = request
@@ -1717,6 +1751,17 @@ class CollapsiblePagerHost(context: Context) : NestedScrollableHost(context), Ne
     original.appliedTopInset = topInset
 
     val key = pageKey(pageIndex)
+    val geometry = Triple(scroller.getChildAt(0)?.height ?: 0, scroller.height,
+      scroller.paddingTop + scroller.paddingBottom)
+    deferredScrollerGeometry[scroller]?.let { deferred ->
+      if (geometry != deferred) {
+        deferredScrollerGeometry.remove(scroller)
+        restoredScrollerKeys.remove(scroller)
+        if (nativeSmoothHeaderScrollEnabled && headerOffsetPx == headerHeightPx) {
+          displayBodyOverrides.remove(key)
+        }
+      }
+    }
     if (restoredScrollerKeys[scroller] != key) {
       restoredScrollerKeys[scroller] = key
       val restoreRequest = registerPageRestore(key, scroller, pageIndex)
@@ -1744,6 +1789,16 @@ class CollapsiblePagerHost(context: Context) : NestedScrollableHost(context), Ne
           return@post
         }
         if (scroller.scrollY != saved) scroller.scrollTo(scroller.scrollX, saved)
+        val unreachableReadingIntent = nativeSmoothHeaderScrollEnabled &&
+          headerOffsetPx == headerHeightPx && displayBodyOverrides.containsKey(key) &&
+          (pageOffsets[key] ?: 0) > scroller.scrollY && !scroller.canScrollVertically(1)
+        if (nativeSmoothHeaderScrollEnabled && (scroller.scrollY != saved || unreachableReadingIntent)) {
+          deferredScrollerGeometry[scroller] = Triple(scroller.getChildAt(0)?.height ?: 0,
+            scroller.height, scroller.paddingTop + scroller.paddingBottom)
+          offsetDiag("scrollview-restore-pending-saved=$saved-current=${scroller.scrollY}", scroller, key, pageIndex, restoreRequest)
+          return@post
+        }
+        deferredScrollerGeometry.remove(scroller)
         if (nativeSmoothHeaderScrollEnabled) clearPageRestoreForView(key, scroller, restoreRequest)
         else pendingPageRestores.remove(key)
         offsetDiag("scrollview-restore-after-saved=$saved", scroller, key, pageIndex, restoreRequest)
@@ -1813,6 +1868,7 @@ class CollapsiblePagerHost(context: Context) : NestedScrollableHost(context), Ne
 
   private fun restoreNativeScrollerInsets(scroller: ScrollView) {
     val original = originalScrollerPadding.remove(scroller) ?: return
+    deferredScrollerGeometry.remove(scroller)
     updateScrollerPaddingOwnership(scroller, original)
     restoredScrollerKeys.remove(scroller)?.let { clearPageRestoreForView(it, scroller) }
     if (scroller is ReactScrollView) {
@@ -2193,6 +2249,7 @@ class CollapsiblePagerHost(context: Context) : NestedScrollableHost(context), Ne
       val request = pageRestoreRequests[currentPageKey()]
       offsetDiag("touch-cancel-before", target, request = request)
       observedRecyclerView?.let { deferredRecyclerGeometry.remove(it) }
+      observedNativeScroller?.let { deferredScrollerGeometry.remove(it) }
       pageRestoreRequests.remove(currentPageKey())
       pendingPageRestores.remove(currentPageKey())
       ownedScrollerRestoreRequests.remove(currentPageKey())
@@ -2334,6 +2391,7 @@ class CollapsiblePagerHost(context: Context) : NestedScrollableHost(context), Ne
     alignedBodyKeys.clear()
     transitionAlignedViews.clear()
     deferredRecyclerGeometry.clear()
+    deferredScrollerGeometry.clear()
     displayBodyOverrides.clear()
     displayRecyclerAnchors.clear()
     ownedScrollerRestoreRequests.clear()

package/docs/SPEC.md

@@ -38,6 +38,12 @@ Late callbacks cannot revive cancelled restoration or erase a newer request.
 Observers and commands must match page key, view identity and generation.
 Removed or recycled owners cannot apply callbacks to another page; recycling
 resets owned memory.
+The Web backend shares C and stores per-page B separately from absolute DOM
+scrollTop. Selection aligns to C while expanded and C + B while fully collapsed;
+programmatic alignment and geometry-only scrollend events MUST NOT erase the
+suspended reading position. Real vertical input or a valid List command takes
+over the current display. PageTop/StickyTop clear only the current B.
+
 Legacy mode and pagers without a collapsible header retain their existing
 behavior. Vertical scrolling, refresh, snapping and repeated-current-tab behavior
 are unchanged. This state belongs to native UI instances, with no new React prop
@@ -726,3 +732,9 @@ activation remain unverified.
 The Header is settled only when C is at its expanded top, the current attached view/key/index/generation still matches, and there is no actual drag, deceleration, scrolling command or horizontal transition. Offset/inset/content/header geometry MUST remain stable for 150ms before true is emitted. Motion or geometry changes revoke true promptly. Deferred reading memory alone MUST NOT be treated as active motion. Pull-to-refresh may settle at a normalized negative offset after drag, bounce and inset geometry stop; network refreshing alone is not a motion gate. Checks stop for collapsed, detached and recycled owners; delayed callbacks revalidate their captured identity. State changes are deduplicated; identity changes still publish an unknown/false snapshot.
 
 The native Home Spotlight adapter consumes this snapshot in the main UI runtime and keeps unknown states paused. It MUST use the mounted page-key mapping and reject old page/source callbacks. Native snapshots already include the 150ms stabilization delay: consumers MUST NOT add another such delay. Legacy Tabs keep their existing normalized-offset and debounce behavior. Anchor measurement, guide qualification and the existing display delay remain independent gates.
+
+### Android page mutation during horizontal transitions
+
+Removing a page or clearing the page collection MUST cancel the active horizontal transition and its temporary display snapshots before notifying the adapter. Cancellation MUST NOT rewrite the shared Header collapse or surviving pages' saved body reading memory. The previous observed owner MUST be detached without committing an offset under a shifted page key.
+
+An empty adapter MUST reject transition starts and transition completion without coercing an index into an empty range. The selected index uses zero as an empty-state sentinel; nonempty mutations clamp it to the remaining valid range. Readding pages MUST allow a fresh selection and MUST NOT resume a removed transition source. Conformance requires actual Android active-transition → zero-pages → readd/selection regression and remaining-page mutation checks; structural checks and compilation alone do not establish runtime behavior.

package/lib/module/CollapsiblePagerView.web.js

@@ -44,6 +44,8 @@ export class CollapsiblePagerView extends React.PureComponent {
   pageOffsets = new Map();
   pageHosts = new Map();
   sharedHeaderOffset = 0;
+  selectionRestoreToken = 0;
+  bodyAlignment = null;
   scrollEnabled = this.props.scrollEnabled ?? true;
   lastMountSignature = null;
   configureFrame = null;
@@ -71,6 +73,7 @@ export class CollapsiblePagerView extends React.PureComponent {
     const pageCount = this.pages().length;
     const selectedPage = clampedPageIndex(this.state.selectedPage, pageCount);
     if (selectedPage !== this.state.selectedPage) {
+      this.selectionRestoreToken += 1;
       this.cancelPendingTopFrame();
       this.finishPageTransition();
       this.setState({
@@ -83,6 +86,7 @@ export class CollapsiblePagerView extends React.PureComponent {
     this.notifyMountedPagesChanged();
   }
   componentWillUnmount() {
+    this.selectionRestoreToken += 1;
     this.cancelPendingTopFrame();
     this.savePageOffset(this.state.selectedPage);
     if (this.configureFrame !== null) {
@@ -116,16 +120,32 @@ export class CollapsiblePagerView extends React.PureComponent {
     if (this.pageScrollElement(this.state.selectedPage) === pending.element && this.pages().map(pageKey)[this.state.selectedPage] === pending.key) this.savePageOffset(this.state.selectedPage);
   };
   onQueuedTopWheel = event => {
-    if (event.deltaY !== 0) this.cancelPendingTopFrame();
+    if (event.deltaY !== 0) this.takeOverVerticalScroll();
+  };
+  onScrollbarPointerDown = event => {
+    const element = this.pageScrollElement(this.state.selectedPage);
+    if (!element || event.target !== element || event.button !== 0) return;
+    const rect = element.getBoundingClientRect();
+    const computed = element.ownerDocument.defaultView?.getComputedStyle(element);
+    const borderLeft = Number.parseFloat(computed?.borderLeftWidth ?? "0") || 0;
+    const borderRight = Number.parseFloat(computed?.borderRightWidth ?? "0") || 0;
+    const clientStart = rect.left + element.clientLeft;
+    const clientEnd = clientStart + element.clientWidth;
+    const leftGutter = clientStart - (rect.left + borderLeft);
+    const rightGutter = rect.right - borderRight - clientEnd;
+    const inVerticalTrack = event.clientY >= rect.top + element.clientTop && event.clientY < rect.top + element.clientTop + element.clientHeight;
+    const inGutter = leftGutter > 0 && event.clientX >= rect.left + borderLeft && event.clientX < clientStart || rightGutter > 0 && event.clientX >= clientEnd && event.clientX < rect.right - borderRight;
+    if (inVerticalTrack && inGutter) this.takeOverVerticalScroll();
   };
   onQueuedTopKey = event => {
-    if (["ArrowUp", "ArrowDown", "PageUp", "PageDown", "Home", "End", " "].includes(event.key)) this.cancelPendingTopFrame();
+    if (["ArrowUp", "ArrowDown", "PageUp", "PageDown", "Home", "End", " "].includes(event.key)) this.takeOverVerticalScroll();
   };
   scrollCurrentPageToTop(offset, animated) {
     if (this.horizontalTouch || this.transitionTimer !== null) return;
     const element = this.pageScrollElement(this.state.selectedPage);
     const key = this.pages().map(pageKey)[this.state.selectedPage];
     if (!element?.isConnected || !key) return;
+    this.selectionRestoreToken += 1;
     this.cancelPendingTopFrame();
     const EventConstructor = element.ownerDocument.defaultView?.Event;
     if (EventConstructor) element.dispatchEvent(new EventConstructor("ok-collapsible-pager-cancel-scroll-command"));
@@ -138,8 +158,12 @@ export class CollapsiblePagerView extends React.PureComponent {
       if (this.pendingTopFrame?.frame !== frame) return;
       this.pendingTopFrame = null;
       if (!element.isConnected || this.horizontalTouch || this.transitionTimer !== null || this.pageScrollElement(this.state.selectedPage) !== element || this.pages().map(pageKey)[this.state.selectedPage] !== key) return;
-      this.pageOffsets.set(key, offset);
+      this.pageOffsets.set(key, 0);
       this.sharedHeaderOffset = offset;
+      this.bodyAlignment = {
+        element,
+        key
+      };
       element.scrollTo({
         top: offset,
         behavior: animated ? "smooth" : "instant"
@@ -218,8 +242,9 @@ export class CollapsiblePagerView extends React.PureComponent {
     const configured = this.configuredScrollElement;
     if (!configured) return;
     this.cancelPendingTopFrame();
-    configured.element.removeEventListener("ok-native-list-scroll-command-accepted", this.cancelPendingTopFrame);
+    configured.element.removeEventListener("ok-native-list-scroll-command-accepted", this.onListScrollCommandAccepted);
     configured.element.removeEventListener("wheel", this.onQueuedTopWheel);
+    configured.element.removeEventListener("pointerdown", this.onScrollbarPointerDown);
     configured.element.removeEventListener("keydown", this.onQueuedTopKey);
     configured.element.removeEventListener("scrollend", this.onVerticalScrollSettled);
     const style = timelineStyle(configured.element);
@@ -234,6 +259,7 @@ export class CollapsiblePagerView extends React.PureComponent {
     configured.element.removeAttribute("data-collapsible-pager-active");
     this.notifyInsetsChanged(configured.element);
     this.configuredScrollElement = null;
+    if (this.bodyAlignment?.element === configured.element) this.bodyAlignment = null;
   }
   configureActiveScrollElement = () => {
     this.configureFrame = null;
@@ -269,8 +295,9 @@ export class CollapsiblePagerView extends React.PureComponent {
         pagerStickyInset: style.getPropertyValue(PAGER_STICKY_INSET)
       };
       element.addEventListener("scrollend", this.onVerticalScrollSettled);
-      element.addEventListener("ok-native-list-scroll-command-accepted", this.cancelPendingTopFrame);
+      element.addEventListener("ok-native-list-scroll-command-accepted", this.onListScrollCommandAccepted);
       element.addEventListener("wheel", this.onQueuedTopWheel);
+      element.addEventListener("pointerdown", this.onScrollbarPointerDown);
       element.addEventListener("keydown", this.onQueuedTopKey);
     }
     const style = timelineStyle(element);
@@ -299,8 +326,18 @@ export class CollapsiblePagerView extends React.PureComponent {
       this.configureActiveScrollElement();
     }
   }
-  onVerticalScrollSettled = () => {
-    if (this.pendingTopFrame) return;
+  takeOverVerticalScroll = () => {
+    this.selectionRestoreToken += 1;
+    this.bodyAlignment = null;
+    this.cancelPendingTopFrame();
+    this.savePageOffset(this.state.selectedPage);
+  };
+  onListScrollCommandAccepted = event => {
+    if (event.target !== this.pageScrollElement(this.state.selectedPage)) return;
+    this.takeOverVerticalScroll();
+  };
+  onVerticalScrollSettled = event => {
+    if (this.pendingTopFrame || event && event.target !== this.pageScrollElement(this.state.selectedPage)) return;
     this.savePageOffset(this.state.selectedPage);
     this.emitDiagnostics("scroll-settled");
   };
@@ -308,15 +345,24 @@ export class CollapsiblePagerView extends React.PureComponent {
     const key = this.pages().map(pageKey)[index];
     const scrollElement = this.pageScrollElement(index);
     if (key && scrollElement) {
-      this.pageOffsets.set(key, scrollElement.scrollTop);
-      this.sharedHeaderOffset = Math.min(Math.max(scrollElement.scrollTop, 0), Math.max(0, this.props.headerHeight));
+      if (this.bodyAlignment?.key === key && this.bodyAlignment.element === scrollElement) return;
+      const D = Math.max(0, this.props.headerHeight);
+      this.pageOffsets.set(key, Math.max(0, scrollElement.scrollTop - D));
+      this.sharedHeaderOffset = Math.min(Math.max(scrollElement.scrollTop, 0), D);
     }
   }
   restorePageOffset(index) {
     const key = this.pages().map(pageKey)[index];
     const scrollElement = this.pageScrollElement(index);
     if (!key || !scrollElement) return;
-    scrollElement.scrollTop = Math.max(this.pageOffsets.get(key) ?? this.sharedHeaderOffset, this.sharedHeaderOffset);
+    const D = Math.max(0, this.props.headerHeight);
+    const C = Math.min(Math.max(0, this.sharedHeaderOffset), D);
+    const expectedQ = C + (C === D ? this.pageOffsets.get(key) ?? 0 : 0);
+    this.bodyAlignment = {
+      element: scrollElement,
+      key
+    };
+    scrollElement.scrollTop = expectedQ;
   }
   selectPage(selectedPage, animated) {
     const pages = this.pages();
@@ -324,6 +370,8 @@ export class CollapsiblePagerView extends React.PureComponent {
     if (position === null || position < 0 || position >= pages.length || position === this.state.selectedPage) {
       return;
     }
+    const selectionToken = ++this.selectionRestoreToken;
+    const expectedKey = this.pages().map(pageKey)[position];
     this.cancelPendingTopFrame();
     this.savePageOffset(this.state.selectedPage);
     if (animated) this.beginPageTransition();else this.finishPageTransition();
@@ -333,6 +381,7 @@ export class CollapsiblePagerView extends React.PureComponent {
     }, () => {
       this.scheduleScrollConfiguration();
       const restore = () => {
+        if (this.selectionRestoreToken !== selectionToken || this.state.selectedPage !== position || this.pages().map(pageKey)[position] !== expectedKey || !this.pageScrollElement(position)?.isConnected) return;
         this.configureActiveScrollElement();
         this.restorePageOffset(position);
       };
@@ -392,7 +441,7 @@ export class CollapsiblePagerView extends React.PureComponent {
     if (!touch) return;
     const deltaX = touch.pageX - this.touchStartX;
     const deltaY = touch.pageY - (this.touchStartY ?? touch.pageY);
-    if (Math.abs(deltaY) >= 8 && Math.abs(deltaY) > Math.abs(deltaX)) this.cancelPendingTopFrame();
+    if (Math.abs(deltaY) >= 8 && Math.abs(deltaY) > Math.abs(deltaX)) this.takeOverVerticalScroll();
     if (Math.abs(deltaX) >= 8 && Math.abs(deltaX) > Math.abs(deltaY)) {
       this.cancelPendingTopFrame();
       this.horizontalTouch = true;

package/lib/typescript/src/CollapsiblePagerView.web.d.ts

@@ -59,6 +59,8 @@ export declare class CollapsiblePagerView extends React.PureComponent<Collapsibl
     private pageOffsets;
     private pageHosts;
     private sharedHeaderOffset;
+    private selectionRestoreToken;
+    private bodyAlignment;
     private scrollEnabled;
     private lastMountSignature;
     private configureFrame;
@@ -80,6 +82,7 @@ export declare class CollapsiblePagerView extends React.PureComponent<Collapsibl
     }>) => void;
     private cancelPendingTopFrame;
     private onQueuedTopWheel;
+    private onScrollbarPointerDown;
     private onQueuedTopKey;
     private scrollCurrentPageToTop;
     setScrollEnabled: (scrollEnabled: boolean) => void;
@@ -97,6 +100,8 @@ export declare class CollapsiblePagerView extends React.PureComponent<Collapsibl
     private restoreConfiguredScrollElement;
     private configureActiveScrollElement;
     private scheduleScrollConfiguration;
+    private takeOverVerticalScroll;
+    private onListScrollCommandAccepted;
     private onVerticalScrollSettled;
     private savePageOffset;
     private restorePageOffset;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onekeyfe/react-native-pager-view",
-  "version": "3.0.175",
+  "version": "3.0.177",
   "description": "React Native wrapper for Android and iOS ViewPager",
   "source": "./src/index.tsx",
   "main": "./lib/module/index.js",
@@ -72,7 +72,7 @@
     "typescript": "^5.9.2"
   },
   "peerDependencies": {
-    "@onekeyfe/react-native-native-logger": "3.0.175",
+    "@onekeyfe/react-native-native-logger": "3.0.177",
     "react": "*",
     "react-native": "*"
   },

package/src/CollapsiblePagerView.web.tsx

@@ -154,6 +154,11 @@ export class CollapsiblePagerView extends React.PureComponent<
   private pageOffsets = new Map<string, number>();
   private pageHosts = new Map<number, HTMLElement>();
   private sharedHeaderOffset = 0;
+  private selectionRestoreToken = 0;
+  private bodyAlignment: Readonly<{
+    element: HTMLElement;
+    key: string;
+  }> | null = null;
   private scrollEnabled = this.props.scrollEnabled ?? true;
   private lastMountSignature: string | null = null;
   private configureFrame: number | null = null;
@@ -188,6 +193,7 @@ export class CollapsiblePagerView extends React.PureComponent<
     const pageCount = this.pages().length;
     const selectedPage = clampedPageIndex(this.state.selectedPage, pageCount);
     if (selectedPage !== this.state.selectedPage) {
+      this.selectionRestoreToken += 1;
       this.cancelPendingTopFrame();
       this.finishPageTransition();
       this.setState({
@@ -201,6 +207,7 @@ export class CollapsiblePagerView extends React.PureComponent<
   }
 
   componentWillUnmount() {
+    this.selectionRestoreToken += 1;
     this.cancelPendingTopFrame();
     this.savePageOffset(this.state.selectedPage);
     if (this.configureFrame !== null) {
@@ -247,7 +254,33 @@ export class CollapsiblePagerView extends React.PureComponent<
   };
 
   private onQueuedTopWheel = (event: WheelEvent) => {
-    if (event.deltaY !== 0) this.cancelPendingTopFrame();
+    if (event.deltaY !== 0) this.takeOverVerticalScroll();
+  };
+
+  private onScrollbarPointerDown = (event: PointerEvent) => {
+    const element = this.pageScrollElement(this.state.selectedPage);
+    if (!element || event.target !== element || event.button !== 0) return;
+    const rect = element.getBoundingClientRect();
+    const computed =
+      element.ownerDocument.defaultView?.getComputedStyle(element);
+    const borderLeft = Number.parseFloat(computed?.borderLeftWidth ?? "0") || 0;
+    const borderRight =
+      Number.parseFloat(computed?.borderRightWidth ?? "0") || 0;
+    const clientStart = rect.left + element.clientLeft;
+    const clientEnd = clientStart + element.clientWidth;
+    const leftGutter = clientStart - (rect.left + borderLeft);
+    const rightGutter = rect.right - borderRight - clientEnd;
+    const inVerticalTrack =
+      event.clientY >= rect.top + element.clientTop &&
+      event.clientY < rect.top + element.clientTop + element.clientHeight;
+    const inGutter =
+      (leftGutter > 0 &&
+        event.clientX >= rect.left + borderLeft &&
+        event.clientX < clientStart) ||
+      (rightGutter > 0 &&
+        event.clientX >= clientEnd &&
+        event.clientX < rect.right - borderRight);
+    if (inVerticalTrack && inGutter) this.takeOverVerticalScroll();
   };
 
   private onQueuedTopKey = (event: KeyboardEvent) => {
@@ -262,7 +295,7 @@ export class CollapsiblePagerView extends React.PureComponent<
         " ",
       ].includes(event.key)
     )
-      this.cancelPendingTopFrame();
+      this.takeOverVerticalScroll();
   };
 
   private scrollCurrentPageToTop(offset: number, animated: boolean) {
@@ -270,6 +303,7 @@ export class CollapsiblePagerView extends React.PureComponent<
     const element = this.pageScrollElement(this.state.selectedPage);
     const key = this.pages().map(pageKey)[this.state.selectedPage];
     if (!element?.isConnected || !key) return;
+    this.selectionRestoreToken += 1;
     this.cancelPendingTopFrame();
     const EventConstructor = element.ownerDocument.defaultView?.Event;
     if (EventConstructor)
@@ -292,8 +326,9 @@ export class CollapsiblePagerView extends React.PureComponent<
         this.pages().map(pageKey)[this.state.selectedPage] !== key
       )
         return;
-      this.pageOffsets.set(key, offset);
+      this.pageOffsets.set(key, 0);
       this.sharedHeaderOffset = offset;
+      this.bodyAlignment = { element, key };
       element.scrollTo({
         top: offset,
         behavior: animated ? "smooth" : "instant",
@@ -392,9 +427,13 @@ export class CollapsiblePagerView extends React.PureComponent<
     this.cancelPendingTopFrame();
     configured.element.removeEventListener(
       "ok-native-list-scroll-command-accepted",
-      this.cancelPendingTopFrame
+      this.onListScrollCommandAccepted
     );
     configured.element.removeEventListener("wheel", this.onQueuedTopWheel);
+    configured.element.removeEventListener(
+      "pointerdown",
+      this.onScrollbarPointerDown
+    );
     configured.element.removeEventListener("keydown", this.onQueuedTopKey);
     configured.element.removeEventListener(
       "scrollend",
@@ -412,6 +451,8 @@ export class CollapsiblePagerView extends React.PureComponent<
     configured.element.removeAttribute("data-collapsible-pager-active");
     this.notifyInsetsChanged(configured.element);
     this.configuredScrollElement = null;
+    if (this.bodyAlignment?.element === configured.element)
+      this.bodyAlignment = null;
   }
 
   private configureActiveScrollElement = () => {
@@ -458,9 +499,10 @@ export class CollapsiblePagerView extends React.PureComponent<
       element.addEventListener("scrollend", this.onVerticalScrollSettled);
       element.addEventListener(
         "ok-native-list-scroll-command-accepted",
-        this.cancelPendingTopFrame
+        this.onListScrollCommandAccepted
       );
       element.addEventListener("wheel", this.onQueuedTopWheel);
+      element.addEventListener("pointerdown", this.onScrollbarPointerDown);
       element.addEventListener("keydown", this.onQueuedTopKey);
     }
 
@@ -501,8 +543,26 @@ export class CollapsiblePagerView extends React.PureComponent<
     }
   }
 
-  private onVerticalScrollSettled = () => {
-    if (this.pendingTopFrame) return;
+  private takeOverVerticalScroll = () => {
+    this.selectionRestoreToken += 1;
+    this.bodyAlignment = null;
+    this.cancelPendingTopFrame();
+    this.savePageOffset(this.state.selectedPage);
+  };
+
+  private onListScrollCommandAccepted = (event: Event) => {
+    if (event.target !== this.pageScrollElement(this.state.selectedPage))
+      return;
+    this.takeOverVerticalScroll();
+  };
+
+  private onVerticalScrollSettled = (event?: Event) => {
+    if (
+      this.pendingTopFrame ||
+      (event &&
+        event.target !== this.pageScrollElement(this.state.selectedPage))
+    )
+      return;
     this.savePageOffset(this.state.selectedPage);
     this.emitDiagnostics("scroll-settled");
   };
@@ -511,10 +571,16 @@ export class CollapsiblePagerView extends React.PureComponent<
     const key = this.pages().map(pageKey)[index];
     const scrollElement = this.pageScrollElement(index);
     if (key && scrollElement) {
-      this.pageOffsets.set(key, scrollElement.scrollTop);
+      if (
+        this.bodyAlignment?.key === key &&
+        this.bodyAlignment.element === scrollElement
+      )
+        return;
+      const D = Math.max(0, this.props.headerHeight);
+      this.pageOffsets.set(key, Math.max(0, scrollElement.scrollTop - D));
       this.sharedHeaderOffset = Math.min(
         Math.max(scrollElement.scrollTop, 0),
-        Math.max(0, this.props.headerHeight)
+        D
       );
     }
   }
@@ -523,10 +589,11 @@ export class CollapsiblePagerView extends React.PureComponent<
     const key = this.pages().map(pageKey)[index];
     const scrollElement = this.pageScrollElement(index);
     if (!key || !scrollElement) return;
-    scrollElement.scrollTop = Math.max(
-      this.pageOffsets.get(key) ?? this.sharedHeaderOffset,
-      this.sharedHeaderOffset
-    );
+    const D = Math.max(0, this.props.headerHeight);
+    const C = Math.min(Math.max(0, this.sharedHeaderOffset), D);
+    const expectedQ = C + (C === D ? this.pageOffsets.get(key) ?? 0 : 0);
+    this.bodyAlignment = { element: scrollElement, key };
+    scrollElement.scrollTop = expectedQ;
   }
 
   private selectPage(selectedPage: number, animated: boolean) {
@@ -540,6 +607,8 @@ export class CollapsiblePagerView extends React.PureComponent<
     ) {
       return;
     }
+    const selectionToken = ++this.selectionRestoreToken;
+    const expectedKey = this.pages().map(pageKey)[position];
     this.cancelPendingTopFrame();
     this.savePageOffset(this.state.selectedPage);
 
@@ -550,6 +619,13 @@ export class CollapsiblePagerView extends React.PureComponent<
       () => {
         this.scheduleScrollConfiguration();
         const restore = () => {
+          if (
+            this.selectionRestoreToken !== selectionToken ||
+            this.state.selectedPage !== position ||
+            this.pages().map(pageKey)[position] !== expectedKey ||
+            !this.pageScrollElement(position)?.isConnected
+          )
+            return;
           this.configureActiveScrollElement();
           this.restorePageOffset(position);
         };
@@ -629,7 +705,7 @@ export class CollapsiblePagerView extends React.PureComponent<
     const deltaX = touch.pageX - this.touchStartX;
     const deltaY = touch.pageY - (this.touchStartY ?? touch.pageY);
     if (Math.abs(deltaY) >= 8 && Math.abs(deltaY) > Math.abs(deltaX))
-      this.cancelPendingTopFrame();
+      this.takeOverVerticalScroll();
     if (Math.abs(deltaX) >= 8 && Math.abs(deltaX) > Math.abs(deltaY)) {
       this.cancelPendingTopFrame();
       this.horizontalTouch = true;