Each tab must keep its own scroll position
Aliases: independent panel scroll · tab scroll restore
What it is
Each tab panel is its own content, often taller than one screen. Per-tab scroll position means that after reading Reviews halfway, checking Specs, and coming back, Reviews still sits on that stretch. Switching facets is not refreshing the object, and should not reset every block to its top. This is not a bottom tab bar keeping a whole navigation stack. What is stored here is each panel’s viewport on the same object, not page depth across destinations.
Why it happens
People treat an unfinished facet as a book still open at that page. Twenty reviews in, they check a dimension under Specs, and they still need review twenty-one. Share one scroll container, or destroy the panel and drop the offset, and return shows the facet’s start. They think Reviews refreshed, or that they misremembered progress. What must be independent is scroll inside the panel; the object title need not move with it. If the title scrolls away too, coming back starts with hunting for the tab row itself.
There is a quieter failure: panels reuse one DOM, switching only the data, while the scrollbar stays at the previous facet’s pixels. When Specs is short, a large offset left by Reviews makes Specs look empty, and people conclude the facet has no content. “Independent” therefore also means “do not borrow the previous block’s pixels”.
Where it stops holding
When a facet should always be read from the top (a CAPTCHA, a one-shot notice), reset is that facet’s convention. After a filter or reload, an old offset may point at a block that no longer exists; land at the top or the nearest still-living anchor. Nested scrolling (a long list inside a tab) must separate page scroll from panel scroll; sharing the outer one will scroll the whole object away on a tab change. Under memory pressure, pixel offsets of hidden panels may be dropped, but an anchor id should remain so return at least lands on the same row.
Applying it
- Store each panel’s own offset or anchor. Hiding on leave must not write that offset onto a shared container.
- On return, restore that panel’s offset before further scrolling. If a short panel would restore past its own height, clamp to its end; do not show a blank.
- Keep the tab row stably visible near the object title; do not let it ride away with panel scroll unless there is an explicit immersive-reading mode.
- How to check: scroll a long facet to mid, switch away and back, and compare with a screenshot taken before leaving. Lost offset, or a large blank on a short facet, is a fail. Then confirm the tab row was not carried off-screen by inner scroll.