H5 Multi-Container Nested Scrolling with Sticky Tabs

Background: Tab auto‑sticky with multiple nested scroll containers has become popular in e‑commerce apps. Implementing this interaction in H5 is challenging due to lack of native support and performance constraints.

Key characteristics required for a multi‑tab scrolling container: integrated outer and tab scrolling, sticky tab bar, horizontal tab switching, isolated scroll positions per tab, and support for infinite list content.

Common approach: use an invisible top‑level scroll container (S0) to aggregate scroll offsets and multiple child containers (S1, S2‑x). S0 receives user scroll, distributes offsets to S1 before the tab bar sticks and to S2‑x after.

Advantages: natural isolation of tab scroll positions and ability to propagate scroll inertia from parent to children.

H5‑specific solution (Xianyu): employ a single native scroll container (S0) that holds all content. Child tab containers are not scrollable; their scroll offsets are recorded and restored during tab switches. The tab bar uses position:sticky for automatic sticking without extra JS.

During horizontal swipe, the system records the outer scroll offset and adjusts the hidden tabs' top offsets to preserve their scroll positions. After the swipe, it restores the active tab’s offset and resets others.

Additional challenges addressed include translate3d flicker on iOS due to compositing layers, and the interaction between overflow:hidden and position:sticky . The solution temporarily disables overflow on all tabs during swipe and restores it afterward.

Other issues solved: side‑swipe bugs on older Android WebViews, low‑end IntersectionObserver frequency, and lazy loading of intermediate tabs.

Future work focuses on GPU texture cache pressure from compositing layers, efficient recycling of variable‑height list items, and support for lower‑end system versions.