v149 · Scroll · Promises

Guided Tour

Chain scroll Promises to create a sequential guided tour — each stop waits for the scroll to finish before highlighting the section and moving to the next. Interruptions (user scrolling) trigger rejection, letting you abort the sequence cleanly.

scrollIntoView() Promises may not be supported in your browser yet. The tour will still scroll, but Promise chaining behaviour may fall back to synchronous. Try Chrome 149+.
0.8s
stop — / 5
Press "Start tour" to begin the sequential scroll sequence.
stop 1 · introduction
Scroll Promises in Chrome 149
Each call to scrollIntoView() now returns a Promise that resolves when the animation completes. Chain them to step through content in sequence.
stop 2 · the resolve signal
Promise resolves on completion
When the scroll animation finishes, the Promise resolves. await element.scrollIntoView({behavior:'smooth'}) then continues to the next line — no setTimeout guessing required.
stop 3 · interruption handling
Rejection on interruption
If the user scrolls manually mid-animation, the Promise rejects. A try/catch lets you detect the interruption and decide whether to abort the sequence or resume from the current position.
stop 4 · scrollTo() and scrollBy()
All scroll methods return Promises
window.scrollTo(), element.scrollTo(), and element.scrollBy() all return Promises in Chrome 149. Any smooth scroll animation can be awaited.
stop 5 · use cases
Built for guided flows
Onboarding tours, slide decks in HTML, sequential reveal animations — all become easier when you can await scroll() without timers. This very demo is built with chained scroll Promises.

promise log

Waiting for tour to start…

the pattern

const stops = document.querySelectorAll('.tour-stop');

async function runTour() {
  for (const stop of stops) {
    try {
      // Waits for scroll animation to complete before continuing
      await stop.scrollIntoView({ behavior: 'smooth', block: 'start' });
      highlight(stop);
      await pause(800); // time at each stop
    } catch {
      // User interrupted scroll — abort tour
      console.log('Tour interrupted');
      return;
    }
  }
}

runTour();

see also