demo · v130

Concurrent smooth scroll

Click "scroll both" to invoke .scrollIntoView({behavior:"smooth"}) on a target in each scroller at the same time. In v130, both animate together. Before, the second call would cancel the first.

scroller A

scroller B

modern concurrent run

not run yet

Calls scrollIntoView() on both sibling scrollers in the same frame.

pre-130 counterfactual

not run yet

Starts A first, then simulates the old interruption before starting B.

log

the code

const scrollerA = document.querySelector("#a");
const targetA = document.querySelector("#a .target");
const targetB = document.querySelector("#b .target");

// Both scroll concurrently — neither cancels the other.
targetA.scrollIntoView({ behavior: "smooth", block: "center" });
targetB.scrollIntoView({ behavior: "smooth", block: "center" });

// Counterfactual: interrupt A before starting B to show the old failure mode.
targetA.scrollIntoView({ behavior: "smooth", block: "center" });
await new Promise((resolve) => setTimeout(resolve, 140));
scrollerA.scrollTo({ top: scrollerA.scrollTop, behavior: "instant" });
targetB.scrollIntoView({ behavior: "smooth", block: "center" });

see also