element.scrollIntoView

La méthode Element.scrollIntoView() fait défiler la page de manière à rendre l'élément visible.

Syntaxe

js

element.scrollIntoView();
element.scrollIntoView(alignToTop); // Paramètre booléen
element.scrollIntoView(scrollIntoViewOptions); // Paramètre d'objet

Paramètres

alignToTop Facultatif

est une valeur Boolean optionnelle qui :

  • si elle vaut true (vrai), aligne l'élément avec le haut de la zone visible de l'ancêtre défilable. Correspond à scrollIntoViewOptions: {block: "start", inline: "nearest"}. C'est la valeur par défaut.
  • Si elle vaut false (faux), celui-ci sera aligné en bas de la zone visible de l'ancêtre défilable. Correspond à scrollIntoViewOptions: {block: "end", inline: "nearest"}.
scrollIntoViewOptions Facultatif

Est un objet qui a les propriétés suivantes :

behavior Facultatif

Définit l'animation de transition qui peut être "auto", "instant" ou "smooth". Par défaut : "auto".

block Facultatif

L'une des options "start", "center", "end" ou"nearest". Par défaut : "start".

inline Facultatif

L'une des options "start", "center", "end" ou "nearest". Par défaut : "nearest".

Exemple

js

var element = document.getElementById("box");

element.scrollIntoView();
element.scrollIntoView(false);
element.scrollIntoView({ block: "end" });
element.scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" });

Notes

L'élément peut ne pas être aligné complètement avec le haut ou le bas, selon la disposition des autres éléments.

Spécifications

Specification
CSSOM View Module
# dom-element-scrollintoview

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi