Prevent scrollIntoView() from scrolling the container to the top of the page

Question

I'm trying to build a simple "mainly css" image carousel that uses scroll snapping but also has navigation buttons to control the currently viewed slide. The only solution I've found is to use scrollIntoView() on the target element, which does what I want, but it also always scrolls the target element to the top of the page. I want the target carousel slide and container to stay where they are, and I just want the slide to scroll horizontally into view. I was looking at an example from AdamArgyle and he did this and the container stayed where it was, I don't know

P粉976737101 · Answer

Try adding block: 'nearest' to your scrollIntoView options like this:

document.querySelectorAll('button').forEach(button => {
  button.addEventListener('click', event => {
    console.log('event',event);
    slides[event.target.dataset.index].scrollIntoView({
      behavior: 'smooth',
      inline:   'center',
      block:    'nearest',
    });
  });
});