v150 · Web APIs · Parallel Scrolling

Parallel Scroll Race

Use Promise.all() with scroll promises to fire multiple scrolls simultaneously and wait until all of them finish before taking action. Previously impossible without ad-hoc timers or complex listener coordination.

Checking scroll Promise support…

demo

Lane A — short list idle

Lane B — long list idle

Promise A (short): pending

Promise B (long): pending

Promise.all(): waiting

Ready — click a button above…

code

// Chrome 150+: scrollTo() returns Promise<void> for smooth scrolls
const promiseA = containerA.scrollTo({
  top: containerA.scrollHeight,
  behavior: 'smooth',
});

const promiseB = containerB.scrollTo({
  top: containerB.scrollHeight,
  behavior: 'smooth',
});

// Both scroll animations run in parallel.
// Promise.all() waits for BOTH to finish before proceeding.
await Promise.all([promiseA, promiseB]);

console.log('Both containers finished scrolling');
doSomethingAfterBothAreVisible();

// Pre-Chrome-150: you'd need two separate scroll-end event listeners,
// tracking "done" state for each, and calling the shared callback
// only when both had fired. Fragile and verbose.

implementation reference

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

demo

code

see also

implementation reference