ScrollIntoView() provoque le déplacement de toute la page

Question

J'utilise ScrollIntoView () pour faire défiler l'élément en surbrillance dans une liste. Lorsque je fais défiler vers le bas ScrollIntoView (false) fonctionne parfaitement. Mais quand je fais défiler vers le haut, ScrollIntoView (true) fait bouger un peu toute la page, ce qui, je pense, est prévu. Existe-t-il un moyen d'éviter le déplacement de toute la page lors de l'utilisation deScrollIntoView (true) ?

Voici la structure de ma page -

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

<div="container">
    <div="content"> 
         <div id="listOfDivs"> 
             <div id="item1"> </div>
             <div id="item2"> </div>
             <div id="itemn"> </div>
         </div>
    </div>
</div>

listOfDivs vient d'Ajax. Utilisation d'un safari mobile.

Answer 1

Fixé avec :

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

voir : https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

Answer 2

var el = document.querySelector("yourElement");
window.scroll({top: el.offsetTop, behavior: 'smooth'});

Answer 3

J'ai eu ce problème aussi, et j'ai passé de nombreuses heures à essayer de le gérer. J'espère que ma résolution pourra encore aider certaines personnes.

Ma solution a été :

• Pour Chrome : changer .scrollIntoView() en .scrollIntoView({block: 'nearest'}) (grâce à @jfrohn).
• Pour Firefox : appliquer overflow: -moz-hidden-unscrollable; sur l'élément conteneur qui se décale.
• Non testé dans d'autres navigateurs.

Answer 4

Jouez avec scrollIntoViewIfNeeded()... assurez-vous qu'il est pris en charge par le navigateur.