Element : propriété scrollLeft
Baseline
Large disponibilité
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é scrollLeft de l'interface Element obtient ou définit le nombre de pixels par lequel le contenu d'un élément est défilé depuis son bord gauche. Cette valeur est précise au sous-pixel dans les navigateurs modernes, ce qui signifie qu'elle n'est pas nécessairement un nombre entier.
Valeur
Une valeur en virgule flottante double précision indiquant le nombre de pixels par lequel l'élément est actuellement défilé horizontalement depuis l'origine, où une valeur positive signifie que l'élément est défilé vers la droite (pour révéler plus de contenu à droite). Si l'élément n'est pas du tout défilé à gauche ou à droite, alors scrollLeft vaut 0. Si le document n'est pas le document actif, la valeur retournée est 0. Si le document est rendu sur un appareil précis au sous-pixel, la valeur retournée est également précise au sous-pixel et peut contenir une composante décimale.
Il est possible que scrollLeft soit négatif si l'élément peut être défilé vers la gauche depuis le bloc contenant initial. Par exemple, si la direction de l'élément est rtl (de droite à gauche) et que le contenu s'étend vers la gauche, alors scrollLeft vaut 0 lorsque la barre de défilement est à sa position la plus à droite (au début du contenu défilé), puis devient de plus en plus négatif à mesure que vous faites défiler vers la fin du contenu.
Safari réagit au sur-défilement en mettant à jour scrollLeft au-delà de la position de défilement maximale (sauf si l'effet de « rebond » par défaut est désactivé, par exemple en définissant overscroll-behavior sur none), tandis que Chrome et Firefox ne le font pas.
La propriété scrollLeft peut être définie, ce qui provoque le défilement de l'élément jusqu'à la position horizontale définie, de la même manière que l'utilisation de Element.scroll() avec behavior: "auto".
Exemples
HTML
<div id="conteneur">
<div id="contenu">Cliquez sur le bouton pour glisser à droite !</div>
</div>
<button id="defilement" type="button">Glisser à droite</button>
CSS
#conteneur {
width: 100px;
height: 100px;
border: 1px solid #cccccc;
overflow-x: scroll;
}
#contenu {
width: 250px;
background-color: #cccccc;
}
JavaScript
const button = document.getElementById("defilement");
button.onclick = function () {
document.getElementById("conteneur").scrollLeft += 20;
};
Résultat
Spécifications
| Spécification |
|---|
| CSSOM View Module # dom-element-scrollleft |
Compatibilité des navigateurs
Voir aussi
- Déterminer la taille des éléments
- La propriété
HTMLElement.offsetLeft - La propriété
Element.clientLeft - La propriété
Element.scrollHeight - La propriété
Element.scrollWidth - La propriété
Element.scrollTop - La méthode
Element.getBoundingClientRect() - La méthode
Element.scrollTo()
