Comment obtenir un comportement ScrollIntoView cohérent

Question

J'ai donc utilisé ScrollIntoView() pour sauter aux ancres dans un composant de réaction dans le cadre d'une application web. Pour les petites pages, cela fonctionne bien, va au bon endroit et se comporte comme on pourrait s'y attendre. J'ai une page plus grande où le comportement est étrange. Au chargement, le saut à l'ancre est en dessous où il devrait être d'une demi-page ou plus. La première fois que l'on clique sur un lien vers une ancre, y compris la même ancre, l'ancre finit au-dessus où elle devrait être d'un montant similaire. Chaque clic suivant après cela fonctionne parfaitement tant que la page n'est pas rechargée. Voici mon code pour la fonction. Il a un setTimeout parce que je pensais que le problème avait quelque chose à voir avec le chargement de la page, mais il n'y a aucun effet. Voici ma fonction:

scrollToAnchor: function() { 
    let anchorName = this.props.location.hash || window.location.hash; 
    if (anchorName) { 
     anchorName = anchorName.replace("#", ""); 
     let anchorElement = document.getElementById(anchorName); 
     if (anchorElement) { 
      window.setTimeout(anchorElement.scrollIntoView(true), 0); 
     } 
    } else { 
     window.scrollTo(0, 0); 
    } 
}, 

Answer 1

Dans mon cas, je devais ajouter les params par défaut manuellement afin de travailler dans certains navigateurs. Les block et inline params ont une valeur par défaut associée, mais je devais les mettre manuellement comme ceci:

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

Une fois que je les ai définis dans le scrollIntoViewOptions, il a bien fonctionné dans tous les navigateurs. PS: n'oubliez pas le polyfill pour un défilement régulier.