demo · v138
A modal dialog contains a scrollable list. Clicking a list item calls scrollIntoView() — with container: 'nearest' only the inner list scrolls, not the outer page. Toggle to container: 'all' and watch how many scrollers move. The counter shows exactly how many scroll containers moved.
This simulates a long page. The modal sits above it. With container: nearest, clicking items inside the modal only scrolls the modal — this page area stays put. Scroll this outer container down first, then open the modal and click items.
More page content below the fold — this line shows whether the outer scroller moved.
Even more page content here, far below the modal trigger button.
Bottom of the simulated page.
const item = document.querySelector('#item-42');
item.scrollIntoView({ container: 'nearest' });
// Only the nearest ancestor scroll container scrolls.
// Outer page: stays put.
item.scrollIntoView({ container: 'all' });
// All ancestor scrollers fire.
// Inner list + outer page both scroll.