Element.scrollLeft
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
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 vaut rtl (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),
scrollLeftsera fixée à0. - Si la valeur fournie est inférieure à
0(ou supérieure à0pour les éléments écrits de droite à gauche),scrollLeftsera fixée à0. - Si la valeur fournie est supérieure au défilement maximal possible pour le contenu,
scrollLeftsera fixée à la valeur maximale possible.
Attention :
Pour les systèmes qui utilisent une mise à l'échelle pour l'affichage (display scaling), scrollLeft pourra fournir une valeur décimale.
Valeur
Un nombre
Exemples
HTML
<div id="container">
<div id="content">Cliquez sur le bouton pour glisser à droite !</div>
</div>
<button id="slide" 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
| Specification |
|---|
| CSSOM View Module # dom-element-scrollleft |
Compatibilité des navigateurs
Chargement…