demo · v140
Nested Carousel
The chromestatus motivation: a carousel deep inside a scrolling page. Pre-140, calling slide.scrollIntoView() hijacked the whole page — it scrolled every ancestor up to the document. With container: "nearest" only the carousel's own scroller moves.
scroll strategy:
Page top. This is a long-scrolling article with a carousel embedded inside it.
More content. The user is reading down the page; the carousel is offscreen below.
More content still. Scroll down to see the embedded carousel.
embedded carousel:
Content after the carousel. Pre-140 every "scroll to slide" jumped the page back to here.
Even more content. The whole point of
container: "nearest" is to leave the page alone.Scroll the article first so the carousel is mid-visible. Then click a slide button and watch the article. With "container: nearest" the article stays put.
—
// pre-140
slide.scrollIntoView({ behavior: "smooth" });
// scrolls the carousel AND every ancestor scroller all the way to the viewport.
// Chrome 140
slide.scrollIntoView({ container: "nearest", behavior: "smooth" });
// scrolls only the closest scrolling ancestor — the carousel.