demo · v140
scrollIntoView container option
There's an outer scroller and an inner scroller nested inside it. Click "scroll target into view" with each container option to see the difference: nearest only scrolls the inner box; all bubbles up and also scrolls the outer.
outer scroller — try scrolling here to see how it moves
row 1
row 2
row 3
row 4
row 5
row 6
target row — pretend this is your tab focus
row 8
row 9
row 10
row 11
row 12
end of outer content
outer scroll: 0, inner scroll: 0
el.scrollIntoView({ container: "nearest" });
// scrolls only the immediate scroll ancestor
el.scrollIntoView({ container: "all" });
// scrolls every scroll ancestor up to the viewportsee also
- ScrollIntoView container option — feature index
- ChromeStatus entry