v150 · Web APIs · Scroll Promise Demo

Scroll Promise Demo

Scroll the list to a given position and watch the status log. In Chrome 150+, the log shows "scroll started" and then "scroll complete" only when the animation finishes. In older browsers the promise doesn't exist and "complete" fires immediately.

Checking scroll Promise support…

scrollable list

Item 0 — top of list
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9 — bottom of list
px from top
Click a button above to see scroll promise status…

before and after Chrome 150

Before Chrome 150

element.scrollTo({ top: 500, behavior: 'smooth' });
// Returns undefined — no way to know when done

// Fragile workaround:
let done = false;
element.addEventListener('scroll', handler);
function handler() {
  clearTimeout(timer);
  timer = setTimeout(() => {
    if (!done) { done = true; onDone(); }
    element.removeEventListener('scroll', handler);
  }, 150); // guess
}

Chrome 150+

// Returns Promise<void>
await element.scrollTo({
  top: 500,
  behavior: 'smooth'
});
// Exactly here when scroll is done
onDone(); // no guesswork

see also

implementation reference

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