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

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
@@ -513,6 +514,7 @@ class CollapsiblePagerHost(context: Context) : NestedScrollableHost(context), Ne
     alignedBodyKeys.clear()
     transitionAlignedViews.clear()
     deferredRecyclerGeometry.clear()
+    deferredScrollerGeometry.clear()
     displayBodyOverrides.clear()
     displayRecyclerAnchors.clear()
     ownedScrollerRestoreRequests.clear()
@@ -907,6 +909,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 +988,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 +1721,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 +1759,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 +1838,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 +2219,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 +2361,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

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.176",
   "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.176",
     "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;