demo · v130

Ancestor rule probe

Chrome 130 allows concurrent smooth scrolls only on containers that are not ancestors or descendants of each other. Pick a topology, watch the diagram explain why, then run the live test and read the actual frame-timing telemetry.

topology

(no run yet)

the code

const a = document.querySelector("#scroller-a > .target");
const b = document.querySelector("#scroller-b > .target");

// Chrome 130+: if scroller-a and scroller-b are NOT ancestors/descendants
// of each other, both animations run concurrently — both finish smoothly.
a.scrollIntoView({ behavior: "smooth" });
b.scrollIntoView({ behavior: "smooth" });

// Pre-130 (and post-130 ancestor case): the second call cancels the first,
// snapping or chopping that animation.

the code

see also