我正在尝试构建一个简单的“主要是 css”图像轮播，它使用滚动捕捉，但也有导航按钮来控制当前查看的幻灯片。我找到的唯一解决方案是在目标元素上使用scrollIntoView()，它可以满足我的要求，但它也总是将目标元素滚动到页面顶部。我希望目标轮播幻灯片和容器保持在原来的位置，并且我只希望幻灯片水平滚动到视图中。我正在看 Adam Argyle 的一个示例，他就是这样做的，并且容器保持在原来的位置，我不知道他的演示有什么不同。

我做了一个codepen来演示。

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>