Recherche de site Web

Alignement au milieu avec Javascript scrollIntoView() ?

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

  1. haut
  2. fond

Et si je veux faire défiler la vue de telle sorte que je veuille amener un élément particulier quelque part au milieu de la page ?

Réponse n°1

essaye ceci :

 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

Réponse n°2

Il est possible d'utiliser getBoundingClientRect() pour obtenir toutes les informations dont vous avez besoin pour réaliser cela. Par exemple, vous pourriez faire quelque chose comme ceci :

const element = document.getElementById('middle');
const elementRect = element.getBoundingClientRect();
const absoluteElementTop = elementRect.top + window.pageYOffset;
const middle = absoluteElementTop - (window.innerHeight / 2);
window.scrollTo(0, middle);

Démo : http://jsfiddle.net/cxe73c22/

Cette solution est plus efficace que de remonter la chaîne parente, comme dans la réponse acceptée, et n'implique pas de polluer l'espace global en étendant le prototype (ce qui est généralement considéré comme une mauvaise pratique en JavaScript).

La méthode getBoundingClientRect() est prise en charge dans tous les navigateurs modernes.

Réponse n°3

Utilisez window.scrollTo() pour cela. Obtenez le sommet de l'élément vers lequel vous voulez 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 );

Réponse n°4

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

Réponse n°5

Faire défiler jusqu'au milieu d'un élément fonctionne bien si son élément parent a le CSS : overflow: scroll;

Si c'est une liste verticale, vous pouvez utiliser document.getElementById("id").scrollIntoView({block: "center"}); et cela fera défiler votre élément sélectionné jusqu'au centre vertical de l'élément parent.

Santé à Gregory R. et Hakuna pour leurs bonnes réponses.

Lectures complémentaires :

https://developer.mozilla.org/fr/docs/Web/API/Element/scrollIntoView

https://developer.mozilla.org/fr/docs/Web/CSS/overflow

Réponse n°6

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 voulez le centrer globalement, et non centrer son sommet :

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

Articles connexes