@onekeyfe/react-native-pager-view 6.7.0-2 → 6.7.0-20

package/src/CollapsiblePagerView.web.tsx

@@ -1,8 +1,11 @@
 import type { ScrollEdgeEffect } from "./ScrollEdgeEffect";
 import React from "react";
-import { I18nManager, StyleSheet, View } from "react-native";
+import { I18nManager, Platform, StyleSheet, View } from "react-native";
 import type * as ReactNative from "react-native";
 
+import { WebCollapsiblePagerPage } from "./WebCollapsiblePagerPage";
+import type { WebCollapsiblePagerPageBridge } from "./WebCollapsiblePagerPage";
+
 export type OnPageScrollEventData = Readonly<{
   position: number;
   offset: number;
@@ -65,8 +68,9 @@ export interface CollapsiblePagerViewProps
   > {
   header: React.ReactNode;
   stickyHeader: React.ReactNode;
-  headerHeight: number;
-  stickyHeaderHeight: number;
+  headerHeight?: number;
+  stickyHeaderHeight?: number;
+  isActive?: boolean;
   topOverlay?: React.ReactNode;
   topScrollEdgeEffect?: `${ScrollEdgeEffect}`;
   topOverlayColorScheme?: "light" | "dark";
@@ -83,7 +87,9 @@ type State = {
 };
 
 type ConfiguredScrollElement = Readonly<{
+  key: string;
   element: HTMLElement;
+  paddingTarget: HTMLElement;
   rangeSpacer: HTMLElement;
   position: string;
   paddingTop: string;
@@ -95,6 +101,14 @@ type ConfiguredScrollElement = Readonly<{
   pagerStickyInset: string;
 }>;
 
+type WebRouteTarget = Readonly<{
+  key: string;
+  identity: string;
+  owner: HTMLElement;
+  generation: number;
+  top: number;
+}>;
+
 const COLLAPSE_ANIMATION_NAME = "ok-collapsible-pager-collapse";
 const COLLAPSE_STYLE_ID = "ok-collapsible-pager-styles";
 const PAGER_HEADER_INSET = "--ok-collapsible-pager-header-inset";
@@ -124,6 +138,14 @@ const timelineStyle = (element: HTMLElement) =>
     scrollTimelineAxis: string;
   };
 
+function scrollElementTo(element: HTMLElement, options: ScrollToOptions) {
+  // RN Web decorates ScrollView nodes with a React Native scrollTo signature.
+  const scrollTo: (options: ScrollToOptions) => void =
+    element.ownerDocument.defaultView?.Element.prototype.scrollTo ??
+    element.scrollTo;
+  scrollTo.call(element, options);
+}
+
 function ensureCollapseAnimation(document: Document) {
   if (document.getElementById(COLLAPSE_STYLE_ID)) return;
   const style = document.createElement("style");
@@ -132,6 +154,19 @@ function ensureCollapseAnimation(document: Document) {
   document.head.appendChild(style);
 }
 
+function supportsScrollTimeline(document: Document) {
+  const css = document.defaultView?.CSS;
+  return !!(
+    typeof css?.supports === "function" &&
+    css.supports("animation-timeline", "--ok-test") &&
+    css.supports("timeline-scope", "--ok-test") &&
+    css.supports("scroll-timeline-name", "--ok-test") &&
+    css.supports("scroll-timeline-axis", "block") &&
+    css.supports("animation-range", "0px 1px") &&
+    css.supports("animation-duration", "auto")
+  );
+}
+
 const pageKey = (child: React.ReactNode, index: number) => {
   if (React.isValidElement(child) && child.key != null)
     return String(child.key);
@@ -153,11 +188,39 @@ export class CollapsiblePagerView extends React.PureComponent<
 
   private root: HTMLElement | null = null;
   private track: HTMLElement | null = null;
+  private headerSlot: HTMLElement | null = null;
+  private stickySlot: HTMLElement | null = null;
+  private cssTimelineSupported = false;
+  private overlayTouch: {
+    owner: HTMLElement;
+    target: HTMLElement;
+    x: number;
+    y: number;
+    lastY: number;
+  } | null = null;
   private touchStartX: number | null = null;
   private touchStartY: number | null = null;
   private horizontalTouch = false;
   private pageOffsets = new Map<string, number>();
   private pageHosts = new Map<number, HTMLElement>();
+  private pageScrollIdentities = new Map<string, string>();
+  private pageBridges = new Map<string, WebCollapsiblePagerPageBridge>();
+  private ownerRecords = new Map<
+    string,
+    { element: HTMLElement; identity: string; generation: number }
+  >();
+  private ownerGeneration = 0;
+  private lastRawTops = new Map<string, number>();
+  private routeTarget: WebRouteTarget | null = null;
+  private measuredHeaderHeight = 0;
+  private measuredStickyHeight = 0;
+  private headerMeasured = false;
+  private stickyMeasured = false;
+  private headerContent: HTMLElement | null = null;
+  private stickyContent: HTMLElement | null = null;
+  private chromeObserver: ResizeObserver | null = null;
+  private chromeMeasureFrame: number | null = null;
+  private disposed = false;
   private sharedHeaderOffset = 0;
   private selectionRestoreToken = 0;
   private bodyAlignment: Readonly<{
@@ -178,14 +241,79 @@ export class CollapsiblePagerView extends React.PureComponent<
   private configuredScrollElement: ConfiguredScrollElement | null = null;
   private readonly timelineName = `--ok-collapsible-pager-${++collapsiblePagerWebInstance}`;
 
+  private get headerHeight() {
+    return this.hasExplicitHeaderHeight
+      ? (this.props.headerHeight ?? this.measuredHeaderHeight)
+      : this.measuredHeaderHeight;
+  }
+
+  private get hasExplicitHeaderHeight() {
+    return this.props.headerHeight !== undefined &&
+      Number.isFinite(this.props.headerHeight) &&
+      this.props.headerHeight >= 0;
+  }
+
+  private get stickyHeaderHeight() {
+    return this.hasExplicitStickyHeaderHeight
+      ? (this.props.stickyHeaderHeight ?? this.measuredStickyHeight)
+      : this.measuredStickyHeight;
+  }
+
+  private get hasExplicitStickyHeaderHeight() {
+    return this.props.stickyHeaderHeight !== undefined &&
+      Number.isFinite(this.props.stickyHeaderHeight) &&
+      this.props.stickyHeaderHeight >= 0;
+  }
+
+  getSnapshotBeforeUpdate(previousProps: CollapsiblePagerViewProps) {
+    if (previousProps.isActive !== false && this.props.isActive === false)
+      return this.captureRouteTarget(previousProps);
+    return null;
+  }
+
   componentDidMount() {
-    if (this.root) ensureCollapseAnimation(this.root.ownerDocument);
+    this.disposed = false;
+    if (Platform.OS !== "web" || typeof document === "undefined")
+      throw new Error("WebCollapsiblePagerView requires a Web DOM runtime");
+    if (!this.hasExplicitHeaderHeight) this.headerMeasured = false;
+    if (!this.hasExplicitStickyHeaderHeight) this.stickyMeasured = false;
+    this.observeChrome();
+    if (this.root) {
+      this.cssTimelineSupported = supportsScrollTimeline(
+        this.root.ownerDocument
+      );
+      if (this.cssTimelineSupported) {
+        ensureCollapseAnimation(this.root.ownerDocument);
+        this.forceUpdate();
+      }
+    }
     this.scheduleScrollConfiguration();
+    this.syncFallbackHeader();
     this.notifyMountedPagesChanged();
     this.emitDiagnostics("mounted");
   }
 
-  componentDidUpdate(previousProps: CollapsiblePagerViewProps) {
+  componentDidUpdate(
+    previousProps: CollapsiblePagerViewProps,
+    _previousState: State,
+    routeSnapshot: WebRouteTarget | null,
+  ) {
+    if (routeSnapshot) {
+      const record = this.ownerRecords.get(routeSnapshot.key);
+      if (
+        this.pages().map(pageKey).includes(routeSnapshot.key) &&
+        record?.element === routeSnapshot.owner &&
+        record.identity === routeSnapshot.identity &&
+        record.generation === routeSnapshot.generation
+      )
+        this.setRouteTarget(routeSnapshot);
+    }
+    if (previousProps.isActive === false && this.props.isActive !== false) {
+      if (!this.hasExplicitHeaderHeight) this.headerMeasured = false;
+      if (!this.hasExplicitStickyHeaderHeight) this.stickyMeasured = false;
+      this.scheduleChromeMeasurement();
+      this.restoreScrollPosition();
+    }
     if (previousProps.scrollEnabled !== this.props.scrollEnabled) {
       this.scrollEnabled = this.props.scrollEnabled ?? true;
       if (!this.scrollEnabled) {
@@ -207,11 +335,37 @@ export class CollapsiblePagerView extends React.PureComponent<
       });
       return;
     }
+    // Child layout effects can run before page-host refs are reattached.
+    // Recheck identities in the same commit, before a new user command runs.
+    this.mountedPages().forEach((index) =>
+      this.synchronizeScrollOwnerIdentity(index)
+    );
+    const currentKeys = new Set(this.pages().map(pageKey));
+    const ownedKeys = new Set([
+      ...this.pageScrollIdentities.keys(),
+      ...this.pageOffsets.keys(),
+      ...this.lastRawTops.keys(),
+      ...this.ownerRecords.keys(),
+    ]);
+    for (const key of ownedKeys) {
+      if (!currentKeys.has(key)) {
+        this.pageScrollIdentities.delete(key);
+        this.pageOffsets.delete(key);
+        this.lastRawTops.delete(key);
+        this.ownerRecords.delete(key);
+        if (this.routeTarget?.key === key) this.setRouteTarget(null);
+      }
+    }
     this.scheduleScrollConfiguration();
+    this.syncFallbackHeader();
     this.notifyMountedPagesChanged();
   }
 
   componentWillUnmount() {
+    // Activity can disconnect effects before the inactive update commits.
+    const routeTarget = this.captureRouteTarget(this.props);
+    if (routeTarget) this.setRouteTarget(routeTarget);
+    this.disposed = true;
     this.selectionRestoreToken += 1;
     this.cancelPendingTopFrame();
     this.savePageOffset(this.state.selectedPage);
@@ -224,9 +378,196 @@ export class CollapsiblePagerView extends React.PureComponent<
       this.transitionTimer = null;
     }
     this.setTrack(null);
+    this.setRoot(null);
+    this.chromeObserver?.disconnect();
+    this.chromeObserver = null;
+    if (this.chromeMeasureFrame !== null) {
+      cancelAnimationFrame(this.chromeMeasureFrame);
+      this.chromeMeasureFrame = null;
+    }
+    this.pageBridges.clear();
     this.restoreConfiguredScrollElement();
   }
 
+  private setHeaderContent = (node: unknown) => {
+    const element = webElement(node);
+    if (element === this.headerContent) return;
+    if (this.headerContent) this.chromeObserver?.unobserve(this.headerContent);
+    this.headerContent = element;
+    this.headerMeasured = false;
+    if (element) this.chromeObserver?.observe(element);
+    this.scheduleChromeMeasurement();
+  };
+
+  private setStickyContent = (node: unknown) => {
+    const element = webElement(node);
+    if (element === this.stickyContent) return;
+    if (this.stickyContent) this.chromeObserver?.unobserve(this.stickyContent);
+    this.stickyContent = element;
+    this.stickyMeasured = false;
+    if (element) this.chromeObserver?.observe(element);
+    this.scheduleChromeMeasurement();
+  };
+
+  private observeChrome() {
+    this.chromeObserver = new ResizeObserver(this.scheduleChromeMeasurement);
+    if (this.headerContent) this.chromeObserver.observe(this.headerContent);
+    if (this.stickyContent) this.chromeObserver.observe(this.stickyContent);
+    this.scheduleChromeMeasurement();
+  }
+
+  private scheduleChromeMeasurement = () => {
+    if (this.disposed || this.chromeMeasureFrame !== null || typeof requestAnimationFrame !== "function")
+      return;
+    this.chromeMeasureFrame = requestAnimationFrame(() => {
+      this.chromeMeasureFrame = null;
+      const header = this.headerContent;
+      const sticky = this.stickyContent;
+      const nextHeader = header?.isConnected
+        ? Math.max(0, header.getBoundingClientRect().height)
+        : 0;
+      const nextSticky = sticky?.isConnected
+        ? Math.max(0, sticky.getBoundingClientRect().height)
+        : 0;
+      const headerChanged =
+        this.measuredHeaderHeight !== nextHeader ||
+        this.headerMeasured !== Boolean(header?.isConnected);
+      const stickyChanged =
+        this.measuredStickyHeight !== nextSticky ||
+        this.stickyMeasured !== Boolean(sticky?.isConnected);
+      this.measuredHeaderHeight = nextHeader;
+      this.measuredStickyHeight = nextSticky;
+      this.headerMeasured = Boolean(header?.isConnected);
+      this.stickyMeasured = Boolean(sticky?.isConnected);
+      if (headerChanged || stickyChanged) {
+        this.forceUpdate();
+        this.scheduleScrollConfiguration();
+      }
+    });
+  };
+
+  private onPageBridge = (key: string, bridge: WebCollapsiblePagerPageBridge | null) => {
+    if (bridge) {
+      this.pageBridges.set(key, bridge);
+      bridge.setPendingRouteScrollTop(
+        this.routeTarget?.key === key ? this.routeTarget.top : null,
+      );
+      const index = this.pages().map(pageKey).indexOf(key);
+      if (index >= 0) this.syncPageOwner(index);
+    } else {
+      this.pageBridges.delete(key);
+    }
+  };
+
+  private setRouteTarget(target: WebRouteTarget | null) {
+    const oldKey = this.routeTarget?.key;
+    this.routeTarget = target;
+    if (oldKey) this.pageBridges.get(oldKey)?.setPendingRouteScrollTop(null);
+    if (target)
+      this.pageBridges.get(target.key)?.setPendingRouteScrollTop(target.top);
+  }
+
+  private syncPageOwner(index: number) {
+    const key = this.pages().map(pageKey)[index];
+    const element = this.pageScrollElement(index);
+    if (!key || !element) return;
+    const identity = element.getAttribute("data-collapsible-pager-scroll-key") ?? key;
+    const previous = this.ownerRecords.get(key);
+    if (previous?.element !== element || previous.identity !== identity) {
+      if (this.routeTarget?.key === key) this.setRouteTarget(null);
+      this.ownerRecords.set(key, {
+        element,
+        identity,
+        generation: ++this.ownerGeneration,
+      });
+      this.lastRawTops.delete(key);
+    }
+    this.pageBridges.get(key)?.setOwner(element);
+  }
+
+  private captureRouteTarget(previousProps: CollapsiblePagerViewProps) {
+    const index = this.state.selectedPage;
+    const oldKey = React.Children.toArray(previousProps.children).map(pageKey)[index];
+    const key = this.configuredScrollElement?.key ?? oldKey;
+    const record = key ? this.ownerRecords.get(key) : null;
+    if (!record?.element.isConnected) return null;
+    if (
+      this.routeTarget?.key === key &&
+      this.routeTarget.identity === record.identity &&
+      this.routeTarget.owner === record.element &&
+      this.routeTarget.generation === record.generation
+    )
+      return this.routeTarget;
+    const top =
+      record.element.clientHeight > 0
+        ? record.element.scrollTop
+        : this.lastRawTops.get(key) ?? record.element.scrollTop;
+    return {
+      key,
+      identity: record.identity,
+      owner: record.element,
+      generation: record.generation,
+      top: Math.max(0, top),
+    };
+  }
+
+  public restoreScrollPosition = () => {
+    if (this.disposed || this.props.isActive === false) return false;
+    const pending = this.routeTarget;
+    if (!pending) return true;
+    const key = this.pages().map(pageKey)[this.state.selectedPage];
+    if (key !== pending.key) return false;
+    this.syncPageOwner(this.state.selectedPage);
+    const record = this.ownerRecords.get(key);
+    if (
+      !record ||
+      record.element !== pending.owner ||
+      record.identity !== pending.identity ||
+      record.generation !== pending.generation
+    )
+      return false;
+    const element = record.element;
+    const configured = this.configuredScrollElement;
+    if (
+      !element.isConnected ||
+      element.clientHeight <= 0 ||
+      configured?.element !== element ||
+      configured.key !== key ||
+      (!this.hasExplicitHeaderHeight && !this.headerMeasured) ||
+      (!this.hasExplicitStickyHeaderHeight && !this.stickyMeasured) ||
+      element.getAttribute("data-collapsible-pager-active") !== "true" ||
+      element.style.getPropertyValue(PAGER_HEADER_INSET).trim() !==
+        `${this.headerHeight}px` ||
+      element.style.getPropertyValue(PAGER_STICKY_INSET).trim() !==
+        `${this.stickyHeaderHeight}px` ||
+      element.scrollHeight - element.clientHeight < pending.top
+    )
+      return false;
+    this.selectionRestoreToken += 1;
+    this.cancelPendingTopFrame();
+    this.setRouteTarget(null);
+    this.lastRawTops.set(key, pending.top);
+    const D = this.headerHeight;
+    this.sharedHeaderOffset = Math.min(pending.top, D);
+    this.pageOffsets.set(key, Math.max(0, pending.top - D));
+    this.bodyAlignment = { element, key };
+    scrollElementTo(element, { top: pending.top, behavior: "instant" });
+    this.syncFallbackHeader();
+    return true;
+  };
+
+  private onPageScroll = (key: string, top: number) => {
+    if (this.props.isActive !== false) this.lastRawTops.set(key, top);
+  };
+
+  private onPageGeometryChange = (key: string) => {
+    if (this.routeTarget?.key === key) this.restoreScrollPosition();
+  };
+
+  private onPageUserInput = (key: string) => {
+    if (this.routeTarget?.key === key) this.setRouteTarget(null);
+  };
+
   public setPage = (selectedPage: number) => {
     this.selectPage(selectedPage, true);
   };
@@ -239,9 +580,26 @@ export class CollapsiblePagerView extends React.PureComponent<
     this.scrollCurrentPageToTop(0, options?.animated ?? true);
   };
 
+  public scrollHeaderBy = (delta: number) => {
+    if (!Number.isFinite(delta)) return;
+    const offset = Math.min(
+      this.headerHeight,
+      Math.max(0, this.sharedHeaderOffset + delta)
+    );
+    this.scrollCurrentPageToTop(offset, false);
+  };
+
+  public scrollHeaderToOffset = (offset: number) => {
+    if (!Number.isFinite(offset)) return;
+    this.scrollCurrentPageToTop(
+      Math.min(this.headerHeight, Math.max(0, offset)),
+      false
+    );
+  };
+
   public scrollToStickyTop = (options?: Readonly<{ animated?: boolean }>) => {
     this.scrollCurrentPageToTop(
-      Math.max(0, this.props.headerHeight),
+      this.headerHeight,
       options?.animated ?? true
     );
   };
@@ -308,6 +666,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.setRouteTarget(null);
     this.selectionRestoreToken += 1;
     this.cancelPendingTopFrame();
     const EventConstructor = element.ownerDocument.defaultView?.Event;
@@ -315,7 +674,7 @@ export class CollapsiblePagerView extends React.PureComponent<
       element.dispatchEvent(
         new EventConstructor("ok-collapsible-pager-cancel-scroll-command")
       );
-    element.scrollTo({
+    scrollElementTo(element, {
       left: element.scrollLeft,
       top: element.scrollTop,
       behavior: "instant",
@@ -332,12 +691,13 @@ export class CollapsiblePagerView extends React.PureComponent<
       )
         return;
       this.pageOffsets.set(key, 0);
-      this.sharedHeaderOffset = offset;
+      this.sharedHeaderOffset = Math.min(this.headerHeight, Math.max(0, offset));
       this.bodyAlignment = { element, key };
-      element.scrollTo({
-        top: offset,
+      scrollElementTo(element, {
+        top: this.sharedHeaderOffset,
         behavior: animated ? "smooth" : "instant",
       });
+      this.syncFallbackHeader();
     });
     this.pendingTopFrame = { frame, element, key };
   }
@@ -411,12 +771,186 @@ export class CollapsiblePagerView extends React.PureComponent<
   private pageScrollElement(index: number) {
     const pageHost = this.pageHosts.get(index);
     return (
-      pageHost?.querySelector<HTMLElement>(
-        ".ok-native-list-viewport, [data-collapsible-pager-scroll]"
-      ) ?? pageHost
+      pageHost?.querySelector<HTMLElement>("[data-collapsible-pager-scroll]") ??
+      pageHost?.querySelector<HTMLElement>(".ok-native-list-viewport") ??
+      pageHost
     );
   }
 
+  private setRoot = (node: unknown) => {
+    const root = webElement(node);
+    if (root === this.root) return;
+    this.root?.removeEventListener(
+      "ok-collapsible-pager-scroll-key-changed",
+      this.onScrollOwnerIdentityChanged
+    );
+    this.root?.removeEventListener("wheel", this.onOverlayWheel);
+    this.root?.removeEventListener("touchstart", this.onOverlayTouchStart);
+    this.root?.removeEventListener("touchmove", this.onOverlayTouchMove);
+    this.root?.removeEventListener("touchend", this.onOverlayTouchEnd);
+    this.root?.removeEventListener("touchcancel", this.onOverlayTouchEnd);
+    this.overlayTouch = null;
+    this.root = root;
+    root?.addEventListener(
+      "ok-collapsible-pager-scroll-key-changed",
+      this.onScrollOwnerIdentityChanged
+    );
+    root?.addEventListener("wheel", this.onOverlayWheel, { passive: false });
+    root?.addEventListener("touchstart", this.onOverlayTouchStart, {
+      passive: true,
+    });
+    root?.addEventListener("touchmove", this.onOverlayTouchMove, {
+      passive: false,
+    });
+    root?.addEventListener("touchend", this.onOverlayTouchEnd);
+    root?.addEventListener("touchcancel", this.onOverlayTouchEnd);
+  };
+
+  private overlayTarget(event: Event) {
+    const target = event.target as HTMLElement | null;
+    if (
+      !target ||
+      (!this.headerSlot?.contains(target) &&
+        !this.stickySlot?.contains(target)) ||
+      target.closest("input,textarea,select,[contenteditable=true]")
+    )
+      return null;
+    return target;
+  }
+
+  private nestedScrollConsumes(target: HTMLElement, delta: number) {
+    for (
+      let node: HTMLElement | null = target;
+      node && node !== this.root;
+      node = node.parentElement
+    ) {
+      const style = node.ownerDocument.defaultView?.getComputedStyle(node);
+      if (
+        /auto|scroll/.test(style?.overflowY ?? "") &&
+        node.scrollHeight > node.clientHeight &&
+        (delta < 0
+          ? node.scrollTop > 0
+          : node.scrollTop < node.scrollHeight - node.clientHeight)
+      )
+        return true;
+    }
+    return false;
+  }
+
+  private scrollOverlayOwner(owner: HTMLElement, delta: number, event: Event) {
+    if (!event.cancelable) return;
+    const EventConstructor = owner.ownerDocument.defaultView?.Event;
+    if (EventConstructor)
+      owner.dispatchEvent(
+        new EventConstructor("ok-collapsible-pager-user-scroll")
+      );
+    const top = Math.min(
+      Math.max(0, owner.scrollTop + delta),
+      owner.scrollHeight - owner.clientHeight
+    );
+    if (top === owner.scrollTop) return;
+    this.takeOverVerticalScroll();
+    scrollElementTo(owner, { top, behavior: "instant" });
+    event.preventDefault();
+  }
+
+  private onOverlayWheel = (event: WheelEvent) => {
+    const target = this.overlayTarget(event);
+    const owner = this.pageScrollElement(this.state.selectedPage);
+    if (
+      !target ||
+      !owner ||
+      event.defaultPrevented ||
+      event.ctrlKey ||
+      Math.abs(event.deltaX) > Math.abs(event.deltaY)
+    )
+      return;
+    const lineHeight =
+      Number.parseFloat(
+        target.ownerDocument.defaultView?.getComputedStyle(target).lineHeight ??
+          ""
+      ) || 16;
+    const delta =
+      event.deltaY *
+      (event.deltaMode === 1
+        ? lineHeight
+        : event.deltaMode === 2
+        ? owner.clientHeight
+        : 1);
+    if (!this.nestedScrollConsumes(target, delta))
+      this.scrollOverlayOwner(owner, delta, event);
+  };
+
+  private onOverlayTouchStart = (event: TouchEvent) => {
+    const target = this.overlayTarget(event);
+    const owner = this.pageScrollElement(this.state.selectedPage);
+    const touch = event.touches.length === 1 ? event.touches[0] : null;
+    this.overlayTouch =
+      target && owner && touch
+        ? {
+            owner,
+            target,
+            x: touch.clientX,
+            y: touch.clientY,
+            lastY: touch.clientY,
+          }
+        : null;
+  };
+
+  private onOverlayTouchMove = (event: TouchEvent) => {
+    if (event.defaultPrevented) return;
+    const pending = this.overlayTouch;
+    const touch = event.touches.length === 1 ? event.touches[0] : null;
+    if (
+      !pending ||
+      !touch ||
+      pending.owner !== this.pageScrollElement(this.state.selectedPage)
+    ) {
+      this.overlayTouch = null;
+      return;
+    }
+    const delta = pending.lastY - touch.clientY;
+    pending.lastY = touch.clientY;
+    if (
+      Math.abs(touch.clientY - pending.y) < 8 ||
+      Math.abs(touch.clientX - pending.x) >= Math.abs(touch.clientY - pending.y)
+    )
+      return;
+    if (!this.nestedScrollConsumes(pending.target, delta))
+      this.scrollOverlayOwner(pending.owner, delta, event);
+  };
+
+  private onOverlayTouchEnd = () => {
+    this.overlayTouch = null;
+  };
+
+  private synchronizeScrollOwnerIdentity(index: number) {
+    const key = this.pages().map(pageKey)[index];
+    const element = this.pageScrollElement(index);
+    if (!key || !element) return;
+    const identity =
+      element.getAttribute("data-collapsible-pager-scroll-key") ?? key;
+    const previous = this.pageScrollIdentities.get(key);
+    this.pageScrollIdentities.set(key, identity);
+    this.syncPageOwner(index);
+    if (previous === undefined || previous === identity) return;
+    if (index === this.state.selectedPage) {
+      this.selectionRestoreToken += 1;
+      this.cancelPendingTopFrame();
+      this.sharedHeaderOffset = 0;
+      this.bodyAlignment = null;
+      scrollElementTo(element, { top: 0, behavior: "instant" });
+    }
+    this.pageOffsets.delete(key);
+  }
+
+  private onScrollOwnerIdentityChanged = (event: Event) => {
+    this.pages().forEach((_, index) => {
+      if (event.target === this.pageScrollElement(index))
+        this.synchronizeScrollOwnerIdentity(index);
+    });
+  };
+
   private notifyInsetsChanged(element: HTMLElement) {
     const EventConstructor = element.ownerDocument.defaultView?.Event;
     if (EventConstructor) {
@@ -444,10 +978,11 @@ export class CollapsiblePagerView extends React.PureComponent<
       "scrollend",
       this.onVerticalScrollSettled
     );
+    configured.element.removeEventListener("scroll", this.syncFallbackHeader);
     const style = timelineStyle(configured.element);
     configured.rangeSpacer.remove();
     style.position = configured.position;
-    style.paddingTop = configured.paddingTop;
+    configured.paddingTarget.style.paddingTop = configured.paddingTop;
     style.boxSizing = configured.boxSizing;
     style.scrollTimelineName = configured.scrollTimelineName;
     style.scrollTimelineAxis = configured.scrollTimelineAxis;
@@ -456,6 +991,7 @@ export class CollapsiblePagerView extends React.PureComponent<
     configured.element.removeAttribute("data-collapsible-pager-active");
     this.notifyInsetsChanged(configured.element);
     this.configuredScrollElement = null;
+    this.syncFallbackHeader();
     if (this.bodyAlignment?.element === configured.element)
       this.bodyAlignment = null;
   }
@@ -464,13 +1000,19 @@ export class CollapsiblePagerView extends React.PureComponent<
     this.configureFrame = null;
     const element = this.pageScrollElement(this.state.selectedPage);
     if (!element) return;
+    this.synchronizeScrollOwnerIdentity(this.state.selectedPage);
     if (this.configuredScrollElement?.element !== element) {
       this.restoreConfiguredScrollElement();
       const style = timelineStyle(element);
+      const paddingTarget = element.hasAttribute(
+        "data-collapsible-pager-scroll"
+      )
+        ? webElement(element.firstElementChild) ?? element
+        : element;
       const computedPaddingTop =
-        element.ownerDocument.defaultView?.getComputedStyle(element)
+        element.ownerDocument.defaultView?.getComputedStyle(paddingTarget)
           .paddingTop ||
-        style.paddingTop ||
+        paddingTarget.style.paddingTop ||
         "0px";
       const rangeSpacer = element.ownerDocument.createElement("div");
       Object.assign(rangeSpacer.style, {
@@ -490,10 +1032,12 @@ export class CollapsiblePagerView extends React.PureComponent<
         style.position = "relative";
       element.appendChild(rangeSpacer);
       this.configuredScrollElement = {
+        key: this.pages().map(pageKey)[this.state.selectedPage],
         element,
+        paddingTarget,
         rangeSpacer,
         position,
-        paddingTop: style.paddingTop,
+        paddingTop: paddingTarget.style.paddingTop,
         basePaddingTop: computedPaddingTop,
         boxSizing: style.boxSizing,
         scrollTimelineName: style.scrollTimelineName,
@@ -509,11 +1053,17 @@ export class CollapsiblePagerView extends React.PureComponent<
       element.addEventListener("wheel", this.onQueuedTopWheel);
       element.addEventListener("pointerdown", this.onScrollbarPointerDown);
       element.addEventListener("keydown", this.onQueuedTopKey);
+      if (!this.cssTimelineSupported)
+        element.addEventListener("scroll", this.syncFallbackHeader, {
+          passive: true,
+        });
     }
 
     const style = timelineStyle(element);
-    const headerInset = Math.max(0, this.props.headerHeight);
-    const stickyInset = Math.max(0, this.props.stickyHeaderHeight);
+    const paddingStyle =
+      this.configuredScrollElement?.paddingTarget.style ?? style;
+    const headerInset = this.headerHeight;
+    const stickyInset = this.stickyHeaderHeight;
     if (this.configuredScrollElement)
       this.configuredScrollElement.rangeSpacer.style.height = `calc(100% + ${headerInset}px)`;
     const basePaddingTop =
@@ -524,10 +1074,10 @@ export class CollapsiblePagerView extends React.PureComponent<
     const headerInsetValue = `${headerInset}px`;
     const stickyInsetValue = `${stickyInset}px`;
     const insetsChanged =
-      style.paddingTop !== paddingTop ||
+      paddingStyle.paddingTop !== paddingTop ||
       style.getPropertyValue(PAGER_HEADER_INSET) !== headerInsetValue ||
       style.getPropertyValue(PAGER_STICKY_INSET) !== stickyInsetValue;
-    style.paddingTop = paddingTop;
+    paddingStyle.paddingTop = paddingTop;
     style.boxSizing = "border-box";
     style.scrollTimelineName = this.timelineName;
     style.scrollTimelineAxis = "block";
@@ -535,10 +1085,25 @@ export class CollapsiblePagerView extends React.PureComponent<
     style.setProperty(PAGER_STICKY_INSET, stickyInsetValue);
     element.setAttribute("data-collapsible-pager-active", "true");
     if (insetsChanged) this.notifyInsetsChanged(element);
+    this.syncFallbackHeader();
+    this.pageBridges.get(this.pages().map(pageKey)[this.state.selectedPage])?.requestMeasure();
+    this.restoreScrollPosition();
+  };
+
+  private syncFallbackHeader = () => {
+    if (this.cssTimelineSupported) return;
+    const top = this.configuredScrollElement?.element.scrollTop ?? 0;
+    const collapse = Math.min(
+      Math.max(top, 0),
+      this.headerHeight
+    );
+    const transform = `translateY(${-collapse}px)`;
+    if (this.headerSlot) this.headerSlot.style.transform = transform;
+    if (this.stickySlot) this.stickySlot.style.transform = transform;
   };
 
   private scheduleScrollConfiguration() {
-    if (this.configureFrame !== null) return;
+    if (this.disposed || this.configureFrame !== null) return;
     if (typeof requestAnimationFrame === "function") {
       this.configureFrame = requestAnimationFrame(
         this.configureActiveScrollElement
@@ -549,6 +1114,7 @@ export class CollapsiblePagerView extends React.PureComponent<
   }
 
   private takeOverVerticalScroll = () => {
+    this.setRouteTarget(null);
     this.selectionRestoreToken += 1;
     this.bodyAlignment = null;
     this.cancelPendingTopFrame();
@@ -573,15 +1139,18 @@ export class CollapsiblePagerView extends React.PureComponent<
   };
 
   private savePageOffset(index: number) {
-    const key = this.pages().map(pageKey)[index];
-    const scrollElement = this.pageScrollElement(index);
+    const configured =
+      index === this.state.selectedPage ? this.configuredScrollElement : null;
+    const key = configured?.key ?? this.pages().map(pageKey)[index];
+    const scrollElement = configured?.element ?? this.pageScrollElement(index);
+    if (configured && !scrollElement?.isConnected) return;
     if (key && scrollElement) {
       if (
         this.bodyAlignment?.key === key &&
         this.bodyAlignment.element === scrollElement
       )
         return;
-      const D = Math.max(0, this.props.headerHeight);
+      const D = this.headerHeight;
       this.pageOffsets.set(key, Math.max(0, scrollElement.scrollTop - D));
       this.sharedHeaderOffset = Math.min(
         Math.max(scrollElement.scrollTop, 0),
@@ -594,11 +1163,12 @@ export class CollapsiblePagerView extends React.PureComponent<
     const key = this.pages().map(pageKey)[index];
     const scrollElement = this.pageScrollElement(index);
     if (!key || !scrollElement) return;
-    const D = Math.max(0, this.props.headerHeight);
+    const D = this.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;
+    this.syncFallbackHeader();
   }
 
   private selectPage(selectedPage: number, animated: boolean) {
@@ -612,8 +1182,11 @@ export class CollapsiblePagerView extends React.PureComponent<
     ) {
       return;
     }
+    this.synchronizeScrollOwnerIdentity(this.state.selectedPage);
     const selectionToken = ++this.selectionRestoreToken;
     const expectedKey = this.pages().map(pageKey)[position];
+    if (this.routeTarget && this.routeTarget.key !== expectedKey)
+      this.setRouteTarget(null);
     this.cancelPendingTopFrame();
     this.savePageOffset(this.state.selectedPage);
 
@@ -632,6 +1205,12 @@ export class CollapsiblePagerView extends React.PureComponent<
           )
             return;
           this.configureActiveScrollElement();
+          if (
+            this.selectionRestoreToken !== selectionToken ||
+            this.routeTarget?.key === expectedKey
+          ) {
+            return;
+          }
           this.restorePageOffset(position);
         };
         if (typeof requestAnimationFrame === "function") {
@@ -679,7 +1258,7 @@ export class CollapsiblePagerView extends React.PureComponent<
             this.pageScrollElement(this.state.selectedPage)?.scrollTop ?? 0,
             0
           ),
-          Math.max(0, this.props.headerHeight)
+          this.headerHeight
         ),
         nativePageCount: pages.length,
         attachedPageCount: retainedPages.length,
@@ -770,6 +1349,7 @@ export class CollapsiblePagerView extends React.PureComponent<
       externalTopOverlayTag: _externalTopOverlayTag,
       headerHeight: _headerHeight,
       stickyHeaderHeight: _stickyHeaderHeight,
+      isActive: _isActive,
       pageRetentionDistance: _pageRetentionDistance,
       layoutDirection: _layoutDirection,
       scrollEnabled: _scrollEnabled,
@@ -787,18 +1367,20 @@ export class CollapsiblePagerView extends React.PureComponent<
     const keys = pages.map(pageKey);
     const retained = new Set(this.mountedPages(pages.length));
     const pageWidth = pages.length > 0 ? `${100 / pages.length}%` : "100%";
-    const collapseAnimation = {
-      "--ok-collapsible-header-height": `${Math.max(
-        0,
-        this.props.headerHeight
-      )}px`,
-      animationName: COLLAPSE_ANIMATION_NAME,
-      animationDuration: "auto",
-      animationFillMode: "both",
-      animationTimingFunction: "linear",
-      animationTimeline: this.timelineName,
-      animationRange: `0px ${Math.max(1, this.props.headerHeight)}px`,
-    } as never;
+    const collapseAnimation = this.cssTimelineSupported
+      ? ({
+          "--ok-collapsible-header-height": `${Math.max(
+            0,
+            this.headerHeight
+          )}px`,
+          animationName: COLLAPSE_ANIMATION_NAME,
+          animationDuration: "auto",
+          animationFillMode: "both",
+          animationTimingFunction: "linear",
+          animationTimeline: this.timelineName,
+          animationRange: `0px ${Math.max(1, this.headerHeight)}px`,
+        } as never)
+      : undefined;
     const trackStyle = [
       styles.track,
       {
@@ -818,35 +1400,45 @@ export class CollapsiblePagerView extends React.PureComponent<
     return (
       <View
         {...viewProps}
-        ref={(node) => {
-          this.root = webElement(node);
-        }}
+        ref={this.setRoot}
         style={[
           styles.root,
-          { timelineScope: this.timelineName } as never,
+          this.cssTimelineSupported
+            ? ({ timelineScope: this.timelineName } as never)
+            : undefined,
           style,
         ]}
       >
         <View
+          ref={(node) => {
+            this.headerSlot = webElement(node);
+          }}
           style={[
             styles.header,
-            { height: Math.max(0, this.props.headerHeight) },
+            { height: this.headerHeight },
             collapseAnimation,
           ]}
         >
-          {header}
+          {this.hasExplicitHeaderHeight ? header : (
+            <View ref={this.setHeaderContent}>{header}</View>
+          )}
         </View>
         <View
+          ref={(node) => {
+            this.stickySlot = webElement(node);
+          }}
           style={[
             styles.sticky,
             {
-              top: Math.max(0, this.props.headerHeight),
-              height: Math.max(0, this.props.stickyHeaderHeight),
+              top: this.headerHeight,
+              height: this.stickyHeaderHeight,
             },
             collapseAnimation,
           ]}
         >
-          {stickyHeader}
+          {this.hasExplicitStickyHeaderHeight ? stickyHeader : (
+            <View ref={this.setStickyContent}>{stickyHeader}</View>
+          )}
         </View>
         <View
           ref={this.setTrack}
@@ -871,7 +1463,21 @@ export class CollapsiblePagerView extends React.PureComponent<
               style={[styles.page, { width: pageWidth }]}
               aria-hidden={index !== this.state.selectedPage}
             >
-              {retained.has(index) ? page : null}
+              {retained.has(index) ? (
+                <WebCollapsiblePagerPage
+                  pageKey={keys[index]}
+                  isFocused={index === this.state.selectedPage}
+                  isRouteActive={this.props.isActive !== false}
+                  headerHeight={this.headerHeight}
+                  stickyHeaderHeight={this.stickyHeaderHeight}
+                  onBridge={this.onPageBridge}
+                  onGeometryChange={this.onPageGeometryChange}
+                  onScroll={this.onPageScroll}
+                  onUserInput={this.onPageUserInput}
+                >
+                  {page}
+                </WebCollapsiblePagerPage>
+              ) : null}
             </View>
           ))}
         </View>
@@ -883,7 +1489,7 @@ export class CollapsiblePagerView extends React.PureComponent<
 const styles = StyleSheet.create({
   root: {
     flex: 1,
-    overflow: "hidden",
+    overflow: "clip",
     position: "relative",
   } as never,
   header: {
@@ -899,7 +1505,7 @@ const styles = StyleSheet.create({
     left: 0,
     right: 0,
     zIndex: 4,
-    overflow: "hidden",
+    overflow: "visible",
   } as never,
   track: {
     position: "absolute",