Pourquoi la page entière se déplace-t-elle lors de l'utilisation de ScrollIntoView (true) dans une liste à position fixe ?

ScrollIntoView() et mouvements de page involontaires

Question :

Lors de l'utilisation de ScrollIntoView(true) pour faire défiler un élément dans afficher dans une liste à position fixe, pourquoi la page entière se déplace-t-elle légèrement ?

Contexte :

Une liste à position fixe (#listOfDivs) est chargée via AJAX dans Safari sur un appareil mobile. L'utilisation de ScrollIntoView(false) pour le défilement vers le bas fonctionne comme prévu, mais ScrollIntoView(true) pour le défilement vers le haut provoque le déplacement de la page entière.

Structure :

#listOfDivs {
  position: fixed;
  top: 100px;
  width: 300px;
  height: 300px;
  overflow-y: scroll;
}

<div>

Réponse :

Le comportement par défaut de ScrollIntoView (true) consiste à faire défiler l'élément vers la vue depuis le haut de la fenêtre. Pour empêcher la page entière de se déplacer, spécifiez l'option de comportement comme fluide, l'option de blocage comme la plus proche et l'option en ligne comme début :

element.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' })

Documentation :

Reportez-vous à la documentation de Mozilla Developer Network (MDN) pour plus de détails sur la méthode ScrollIntoView : https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!