While making a carousel using progressive enhancement principles, I encountered some strange scrolling behavior in Chrome.

Set up the carousel

The HTML is simple. Each carousel slide has an id, and CSS is used to arrange the slides horizontally in a scrollable container. The browser knows how to scroll vertically and horizontally when you click an anchor link to view a specific slide, so you don't need to use Javascript to animate anything. Smooth scrolling and snap scrolling are controlled with CSS. The user can navigate through the slides by scrolling horizontally or by clicking the slide links above or below the carousel.

:root {
  scroll-behavior: smooth;
}

.carousel-items {
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem;
  overflow-y: auto;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scroll-snap-stop: always;
}

.carousel-item {
  min-width: 100%;
  scroll-snap-align: center;
  padding: 1rem 2rem;
}

Add functionality with Javascript

The Javascript layer adds additional functionality. It's mainly used control how far the page scrolls vertically before scrolling horizontally. The slide link's click event is intercepted and scrollIntoView is used instead of the browser default functionality. scrollIntoView offers more control over scroll behavior than is possible with pure CSS. The default options are { block: 'start', inline: 'nearest' }, which will scroll vertically until the element is at the top of the viewport, then scroll horizontally to the selected slide. Setting block to nearest will scroll vertically until the entire element is in the viewport, if it isn't already. This is the desired option for the carousel I'm creating. The other possible values are center and end.

el.scrollIntoView({ block: 'nearest', inline: 'nearest' });

The problem

This works great except for one issue in Chrome. If :root has scroll-behavior: smooth;, any clicks after the first one will no longer scroll the carousel horizontally. This means you can no longer change slides after the first click. This happens with or without scrollIntoView. Pure CSS scrolling has the same problem.

But if you scroll the page up or down before clicking again, it will work as expected. It will also work as expected if :root has scroll-behavior set to anything other than smooth.

This only happens in Chrome. Other browsers work as expected. Manually scrolling horizontally through the slides also works as expected.

A solution I don't like

One workaround is to temporarily disable smooth scrolling on :root (or never use it in the first place), but I prefer smooth scrolling and so does the client. This is not the solution I ended up using, but I figured I should mention it.

document.documentElement.style.scrollBehavior = 'auto';
el.scrollIntoView({ block: 'nearest', inline: 'nearest' });
document.documentElement.style.scrollBehavior = 'smooth';

A solution I like

The solution I went with is to use scrollBy to quickly scroll the window up and down by one pixel before attempting scrollIntoView. This happens fast enough to be invisible to the user, and it seems to jostle the viewport enough so that the horizontal scrolling works as expected.

window.scrollBy({ behavior: 'instant', top:  1, left: 0 });
window.scrollBy({ behavior: 'instant', top: -1, left: 0 });
el.scrollIntoView({ block: 'nearest', inline: 'nearest' });

Demo

Try it for yourself. If the carousel slides are completely inside the viewport and block mode is set to nearest, everything works great. If part of the slides are are off the bottom of the viewport when you click a link, that first click will be fine, but subsequent clicks won't move to the appropriate slide. If you turn on the "jostle" hack, things work great again.

scrollIntoView demo

block mode
start
center
end
nearest

Disable smooth scrolling on :root

Jostle the window before scrollIntoView