Halang scrollIntoView() daripada menatal bekas ke bahagian atas halaman

Question

Saya sedang cuba membina karusel imej "kebanyakannya css" yang menggunakan tatal snap tetapi juga mempunyai butang navigasi untuk mengawal slaid yang sedang dilihat. Satu-satunya penyelesaian yang saya temui ialah menggunakan scrollIntoView() pada elemen sasaran, yang melakukan apa yang saya mahu, tetapi ia juga sentiasa menatal elemen sasaran ke bahagian atas halaman. Saya mahu slaid dan bekas karusel sasaran kekal di tempatnya, dan saya hanya mahu slaid itu menatal secara mendatar ke paparan. Saya melihat contoh dari Adam Argyle dan dia melakukan perkara itu dan bekas itu kekal di kedudukan asalnya, saya tidak tahu apa yang berbeza tentang demonstrasinya.

Saya membuat codepen untuk menunjukkan.

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

Mengklik butang bernombor di bahagian bawah akan menatal ke slaid kanan dengan betul dan juga akan menatal keseluruhan bekas merentasi halaman.

Saya cuba menggunakan scrollTo() sebelum dan selepas scrollIntoView() untuk menetapkan skrol paksi-y bekas ke kedudukan sedia ada, tetapi ini tidak memberi kesan.

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

Answer 1

Cuba tambahkan block: 'nearest' pada pilihan tatalIntoView anda seperti ini:

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',
    });
  });
});