Concurrent Smooth scrollIntoViews

concepts

1. Concurrent smooth scroll

   Two side-by-side scrollers, one button that fires scrollIntoView({behavior:"smooth"}) on both at once, and a labeled pre-130 counterfactual showing the old cancellation pattern.

2. TOC sidebar sync

   The chromestatus motivation by name: docs-style page with a sticky table of contents and a long article. Click a TOC entry, both scrollers animate together. A toggle replays the pre-v130 behaviour where one would snap.

3. Ancestor rule probe

   Three topologies (siblings, parent + nested child, deeply-nested cousins) with a frame-timing instrument. Verifies the spec rule that concurrency only applies when scrollers are not ancestors/descendants — and reports the overlap window in ms.

4. Scroll Timeline

   A two-panel document reader: click a chapter to scroll both the outline panel and content panel simultaneously via concurrent scrollIntoView calls — without either animation interrupting the other.

5. Gallery Scroll Sync

   A photo gallery with a horizontal thumbnail strip and a vertical main view. Clicking a thumbnail calls scrollIntoView({behavior:'smooth'}) on both containers simultaneously, while a rapid-click test shows the same-container cancellation boundary.

6. Form Wizard Scroll

   A 5-step wizard where "Next" scrolls both the step-indicator strip and the form content area concurrently. A performance.now() readout confirms both scrollers animated; the pre-130 simulation mode shows one scroll interrupting the other.

why it shipped

Developers sometimes wish to synchronize scrolling between multiple scroll containers using the scrollIntoView API. For example, a developer might want to synchronize a table of contents sidebar with the associated content with smooth scrolls, but this is broken by the fact that smoothly scrolling the content would prevent the table of content from being smoothly scrolled or vice-versa.

references

• ChromeStatus entry
• Spec