La propriétéElement.scrollLeft permet de lire ou de modifier le nombre de pixels le long desquels le contenu d'un élément a défilé depuis son bord gauche.

Si la propriétédirection de l'élément vautrtl (pour une écriture de droite à gauche),scrollLeft est à0 lorsque la barre de défilement est à la position la plus à droite possible (ce qui correspond au début du contenu à faire défiler) et elle devient de plus en plus négative lors du défilement vers la fin du contenu.

Cette propriété peut être définie avec n'importe quelle valeur entière. Toutefois :

• Si l'élément ne peut pas défiler (par exemple parce qu'il n'y a aucun défilement),scrollLeft sera fixée à0.
• Si la valeur fournie est inférieure à0 (ou supérieure à0 pour les éléments écrits de droite à gauche),scrollLeft sera fixée à0.
• Si la valeur fournie est supérieure au défilement maximal possible pour le contenu,scrollLeft sera fixée à la valeur maximale possible.

Valeur

Un nombre

Exemples

HTML

<div>  <div>Cliquez sur le bouton pour glisser à droite !</div></div><button type="button">Glisser à droite</button>

CSS

#container {  width: 100px;  height: 100px;  border: 1px solid #ccc;  overflow-x: scroll;}#content {  width: 250px;  background-color: #ccc;}

JavaScript

const button = document.getElementById("slide");button.onclick = function () {  document.getElementById("container").scrollLeft += 20;};

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• Element.scrollTop
• Element.scrollTo()