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'});
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. Without this API, developers building carousel components need to calculate the scroll offset to bring a particular slide into view and then call scrollTo or set scrollTop / scrollLeft on the scroll container directly. e.g. slideList.addEventListener('click', (evt) => { const target = evt.target.targetSlide; let scrollLeft = target.offsetLeft; const snapAlignInline = getComputedStyle(target).scrollSnapAlignInline; if (snapAlignInline != 'left') { // Adjust scrollLeft for element's snap alignment } // Also account for scroll padding, and scroll margin slideScroller.scrollTo({left: scrollLeft, behavior: 'smooth'}); }); With this API, developers can call scrollIntoView on the target of their buttons, e.g. slideList.addEventListener('click', (evt) => { // scrollIntoView will automatically determine the position. evt.target.targetSlide.scrollIntoView({container: 'nearest', behavior: 'smooth'}); });
Samples: https://output.jsbin.com/rihozik