v138 · css

ScrollIntoView container option

The ScrollIntoViewOptions container option allows developers to perform a scrollIntoView only scrolling the nearest ancestor scroll container. For example, the following snippet only scrolls the scroll container of target to bring target into view, but will not scroll all of the scroll containers to the viewport: target.scrollIntoView({container: 'nearest

concepts

  1. container option

    scrollIntoView learns a container option — choose nearest vs all ancestors.

  2. Sticky-header-aware scroll

    The real-world bug it fixes: target rows no longer hide under sticky table headers. Pre-138 vs 138 side-by-side, with scroll-padding-top doing the work.

  3. Nested scrollers

    Two scrollers, one inside the other. Try container: "all" vs container: "nearest" on the same target — the call log reports how many pixels each scroller moved by.

  4. Focus trap demo

    A modal dialog with a scrollable list inside it. Clicking any item calls scrollIntoView({ container: 'nearest' }) to scroll only the inner list without disturbing the outer page. Toggle between container: 'nearest' and container: 'all' to see the "scrollers moved" count change.

why it shipped

The scrollIntoView API is extremely useful to scroll an element into view respecting things like scroll snapping, scroll margins, etc without the developer needing to calculate the resulting offset. However, it currently scrolls every scroll container all the way to the viewport. This is counter-intuitive when building components in that it hijacks the user's attention to the thing being scrolled into view even if the component may not have intended to do so.

references