我试图构建一个简单的、“大部分是css”的图像轮播，它使用scroll-snap，但也有导航按钮来控制当前视图中的幻灯片。（），它做了我想做的事情，但是它总是把目标元素滚动到页面的顶部。我想让目标carousel幻灯片和容器保持在原来的位置，我只想让幻灯片水平滚动到视图中。我正在看Adam阿盖尔的一个例子，他就是这样做的，容器保持在原来的位置，我看不出他的演示有什么不同。
我做了一个密码笔来演示。
https://codepen.io/krjo-the-decoder/pen/dyjPrLy
单击底部的编号按钮将正确滚动到右侧幻灯片，但也会将整个容器向上滚动到页面。
我尝试在scrollIntoView（）之前和之后使用scrollTo（）将容器的y轴滚动设置为它的现有位置，但没有效果。

<!-- Using tailwind.css -->
<div class="py-48 bg-gray-200">
  <h1 class="text-center font-bold mb-5 text-2xl">Scroll-snap Carousel</h1>
  <div class="grid grid-flow-col overflow-x-auto snap-x snap-mandatory overscroll-x-contain auto-cols-[100%] mx-auto w-[500px]">
    <img src="https://via.placeholder.com/500" width="500" height="500" class="block snap-center w-auto h-auto" data-slide>
    <img src="https://via.placeholder.com/500" width="500" height="500" class="block snap-center w-auto h-auto" data-slide>
    <img src="https://via.placeholder.com/500" width="500" height="500" class="block snap-center w-auto h-auto" data-slide>
    <img src="https://via.placeholder.com/500" width="500" height="500" class="block snap-center w-auto h-auto" data-slide>
  </div>
  <nav class="flex justify-center mt-4">
    <button class="p-2 border rounded-full border-solid border-black w-12 h-12 mx-2" type="button" data-index="0">1</button>
    <button class="p-2 border rounded-full border-solid border-black w-12 h-12 mx-2" type="button" data-index="1">2</button>
    <button class="p-2 border rounded-full border-solid border-black w-12 h-12 mx-2" type="button" data-index="2">3</button>
    <button class="p-2 border rounded-full border-solid border-black w-12 h-12 mx-2" type="button" data-index="3">4</button>
  </nav>
</div>

<script>
const slides = document.querySelectorAll('[data-slide]');
document.querySelectorAll('button').forEach(button => {
  button.addEventListener('click', event => {
    console.log('event',event);
    slides[event.target.dataset.index].scrollIntoView({
      behavior: 'smooth',
      inline:   'center',
    });
  });
});
</script>