demo · v130

Form Wizard Scroll

A multi-step form where advancing to the next step fires scrollIntoView({behavior: 'smooth'}) on both the step indicator dot and the form section simultaneously. Chrome 130 lets both scroll containers animate at once — the progress bar and the form content stay in sync without one interrupting the other.

Mode:
Pre-130 simulation: the step indicator scrolls first; after a 30ms delay the form section scroll fires and interrupts the indicator animation.
Step 1 of 5
Navigate between steps to see concurrent scrollIntoView in action.

the code

On each step transition, scrollIntoView is called on two completely independent scroll containers in the same synchronous block:

function goToStep(index) {
  const dot = stepDots[index];
  const section = formSections[index];

  // Chrome 130: both fire together — concurrent smooth scrolls.
  dot.scrollIntoView({ behavior: 'smooth', inline: 'center' });
  section.scrollIntoView({ behavior: 'smooth', block: 'start' });
}

The progress step track is a horizontal overflow-x: auto container; the form area is a vertical overflow-y: auto container. They share no ancestor scroll port, so Chrome 130 can animate both at once.

Pre-130 simulation inserts a 30ms setTimeout before the form section call:

// Pre-130 simulation — delay causes interruption.
dot.scrollIntoView({ behavior: 'smooth', inline: 'center' });
setTimeout(() => {
  section.scrollIntoView({ behavior: 'smooth', block: 'start' });
}, 30);

Timing is measured with performance.now() — both scroll completions are detected by polling scrollLeft / scrollTop on each container.

see also