Ich versuche, ein einfaches „hauptsächlich CSS“-Bildkarussell zu erstellen, das Scroll-Snap-Funktion verwendet, aber auch über Navigationsschaltflächen zur Steuerung der aktuell angezeigten Folie verfügt. Die einzige Lösung, die ich gefunden habe, besteht darin, scrollIntoView() für das Zielelement zu verwenden, was das tut, was ich will, aber auch das Zielelement immer an den oberen Rand der Seite scrollt. Ich möchte, dass die Zielkarussellfolie und der Container dort bleiben, wo sie sind, und ich möchte, dass die Folie nur horizontal in die Ansicht scrollt. Ich habe mir ein Beispiel von Adam Argyle angesehen und er hat genau das getan und der Container blieb in seiner ursprünglichen Position. Ich weiß nicht, was an seiner Demonstration anders war.

Zur Demonstration habe ich einen Codepen gebaut.

https://codepen.io/krjo-the-decoder/pen/dyjPrLy

Durch Klicken auf die nummerierte Schaltfläche unten wird korrekt zur rechten Folie gescrollt und außerdem wird der gesamte Container über die Seite gescrollt.

Ich habe versucht, scrollTo() vor und nach scrollIntoView() zu verwenden, um den Y-Achsen-Scroll des Containers auf seine bestehende Position zu setzen, aber das hatte keine Auswirkung.

<!-- 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>