Empêcher scrollIntoView() de faire défiler le conteneur vers le haut de la page

Question

J'essaie de créer un carrousel d'images simple "principalement CSS" qui utilise l'accrochage au défilement, mais dispose également de boutons de navigation pour contrôler la diapositive actuellement affichée. La seule solution que j'ai trouvée est d'utiliser scrollIntoView() sur l'élément cible, ce qui fait ce que je veux, mais cela fait aussi toujours défiler l'élément cible vers le haut de la page. Je souhaite que la diapositive du carrousel cible et le conteneur restent là où ils se trouvent, et je souhaite simplement que la diapositive défile horizontalement dans la vue. Je regardais un exemple d'Adam Argyle et c'est exactement ce qu'il a fait et le conteneur est resté dans sa position d'origine, je ne sais pas en quoi sa démonstration était différente.

J'ai réalisé un codepen pour faire une démonstration.

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

Cliquer sur le bouton numéroté en bas fera défiler correctement vers la diapositive de droite et fera également défiler l'ensemble du conteneur sur la page.

J'ai essayé d'utiliser scrollTo() avant et après scrollIntoView() pour définir le défilement de l'axe y du conteneur à sa position existante, mais cela n'a eu aucun effet.

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

Essayez d'ajouter block: 'nearest' à vos options scrollIntoView comme ceci :

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