element.scrollIntoView

Aller à :
  1. Syntaxe
  2. Exemple
  3. Notes
  4. Spécification
  5. Compatibilité des navigateurs
  6. Voir aussi

Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

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

Syntaxe

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

Paramètres

alignWithTop 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 : "center".
inline Facultatif
L'une des options "start", "center", "end" ou "nearest". Par défaut : "nearest".

Exemple

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

element.scrollIntoView();
element.scrollIntoView(false);
element.scrollIntoView({block: "end"});
element.scrollIntoView({behavior: "instant", 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écification

Spécification Statut Commentaire
CSS Object Model (CSSOM) View Module
La définition de 'Element.scrollIntoView()' dans cette spécification.		 Version de travail Définition initiale

Compatibilité des navigateurs

Nous convertissons les données de compatibilité dans un format JSON. Ce tableau de compatibilité utilise encore l'ancien format car nous n'avons pas encore converti les données qu'il contient. Vous pouvez nous aider en contribuant !

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 29 1.0 (1.7 ou moins) 8[1] 38 5.0[1]
scrollIntoViewOptions 61[2] 36 (36)[3][4] Pas de support 48[2] Pas de support
Fonctionnalité Android Webview Chrome for Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support (Oui) (Oui) 1.0 (1.0) Pas de support (Oui) 5.0[1]
scrollIntoViewOptions 61[2] 61[2] 36.0 (36) Pas de support 48[2] Pas de support

[1] Pas de prise en charge de behavior  "smooth" ou options "center".

[2] Les options "block" et "inline" prennent en charge les valeurs  "start", "center", "end", "nearest".

[3] Pas de prise en charge de l'option "inline"

[4] Pas de prise en charge des valeurs "nearest" ou "center" pour l'option "block" (voir bug 1389274).

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : loella16, palpalpalpal, fscholz, teoli, khalid32, ethertank, Mgjbot, BenoitL
Dernière mise à jour par : loella16,