Javascript scrollIntoView() alignement central ?

Question

Javascript .scrollIntoView(boolean) ne fournit que deux options d'alignement.

1. Haut
2. bas

Que faire si je veux faire défiler la vue de telle sorte que. Je veux apporter un élément particulier quelque part au milieu de la page ?

Answer 1

essaye ça :

  document.getElementById('myID').scrollIntoView({
            behavior: 'auto',
            block: 'center',
            inline: 'center'
        });

référez-vous ici pour plus d'informations et d'options : https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

Answer 2

Utilisez window.scrollTo() pour cela. Obtenez le haut de l'élément vers lequel vous souhaitez vous déplacer et soustrayez la moitié de la hauteur de la fenêtre.

Démo : http://jsfiddle.net/ThinkingStiff/MJ69d/

 Element.prototype.documentOffsetTop = function () {
    return this.offsetTop + ( this.offsetParent ? this.offsetParent.documentOffsetTop() : 0 );
};

var top = document.getElementById( 'middle' ).documentOffsetTop() - ( window.innerHeight / 2 );
window.scrollTo( 0, top );

Answer 3

document.getElementById("id").scrollIntoView({block: "center"});

Answer 4

Vous pouvez le faire en deux étapes :

 myElement.scrollIntoView(true);
var viewportH = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
window.scrollBy(0, -viewportH/2); // Adjust scrolling with a negative value here

Vous pouvez ajouter la hauteur de l'élément si vous souhaitez le centrer globalement, et ne pas centrer son sommet :

 myElement.scrollIntoView(true);
var viewportH = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
window.scrollBy(0, (myElement.getBoundingClientRect().height-viewportH)/2);