Element.scrollLeft

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

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), 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.

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

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

css
#container {
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  overflow-x: scroll;
}

#content {
  width: 250px;
  background-color: #ccc;
}

JavaScript

js
const button = document.getElementById("slide");

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

Résultat

must be provided

Spécifications

Specification
CSSOM View Module
# dom-element-scrollleft

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
scrollLeft

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Has more compatibility info.

Voir aussi