v150 · Web APIs · Scroll Sequence

Scroll Sequence

A tour that scrolls through panels in sequence, waiting for each smooth scroll to complete before moving to the next. This is trivial with await scrollTo() in Chrome 150 — before it required scroll-end detection hacks or fixed timeouts that broke on slower devices.

Checking scroll Promise support…

auto-tour

Panel 1 → Panel 2 → Panel 3 → Panel 4 → Panel 5
Panel 1
Panel 2
Panel 3
Panel 4
Panel 5
Click "Run tour" to start the scroll sequence…

code

async function runTour(container, panels) {
  for (let i = 0; i < panels.length; i++) {
    markStep(i, 'active');

    // Chrome 150+: await the smooth scroll
    await container.scrollTo({
      top: panels[i].offsetTop,
      behavior: 'smooth',
    });

    markStep(i, 'done');
    await delay(500); // pause before next panel
  }
}

// Old way — fragile, breaks on slow devices:
function oldScrollSequence(container, panels, index = 0) {
  container.scrollTo({ top: panels[index].offsetTop, behavior: 'smooth' });
  setTimeout(() => {
    if (index + 1 < panels.length)
      oldScrollSequence(container, panels, index + 1);
  }, 800); // ← arbitrary guess, wrong on slow devices
}

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗