v140 · 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 (just the immediate scroller) vs all (every ancestor). Lets sites avoid forced scrolling of outer viewports for nested layouts.

  2. Nested Carousel

    The carousel motivation in action: a slide button in an embedded carousel inside a scrolling article. Toggle the strategy and watch whether the page scroll jumps.

  3. all vs nearest

    A target three scroll containers deep. Press all and every ancestor scrolls; press nearest and only the innermost moves.

  4. Scoped Search

    Two-pane search UI where typing in one pane shouldn't disturb the other. container: 'nearest' keeps each scroll-to-row scoped.

  5. Tree Navigation

    A file-tree sidebar with a scrollable detail panel. Click a tree item — "Scoped" mode uses container to scroll only the tree without touching the detail panel. A scroll-containers-moved counter badges each click. Toggle three modes: scoped / nearest / all.

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