Element : propriété scrollWidth
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.
Element.scrollWidth est une propriété en lecture seule correspondant à la mesure de la largeur du contenu d'un élément, incluant le contenu qui n'est pas visible à l'écran en raison d'un dépassement.
La valeur scrollWidth est égale à la largeur minimale dont l'élément a besoin pour s'adapter à tout le contenu de la fenêtre sans utiliser de barre de défilement horizontale. La largeur est mesurée de la même manière que clientWidth : elle inclut le remplissage (padding) de l'élément, mais pas sa bordure, sa marge ou sa barre de défilement verticale (si présente). Elle peut également inclure la largeur des pseudo-éléments CSS tels que ::before ou ::after. Pour un élément donné, si son contenu peut s'adapter sans avoir besoin d'une barre de défilement horizontale, scrollWidth est égale à clientWidth.
Valeur
Un nombre.
Exemples
Détecter le débordement du contenu
Dans cet exemple, nous utilisons la propriété scrollWidth pour vérifier si le contenu d'un élément déborde de ses limites. Nous avons deux éléments div, le premier avec une largeur de 100px, et le second sans largeur fixe. Leur contenu est exactement le même, et nous affichons un message indiquant si chacun déborde de son conteneur.
HTML
<div id="div1">TotoTruc-TotoTruc-TotoTruc-TotoTruc</div>
<button id="button1">Vérifier le débordement</button>
<pre id="journal1"></pre>
<div id="div2">TotoTruc-TotoTruc-TotoTruc-TotoTruc</div>
<button id="button2">Vérifier le débordement</button>
<pre id="journal2"></pre>
CSS
div {
padding: 0.15em;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
button {
margin: 0.15em 0 0.5em 0;
}
pre {
margin: 0.5em 0;
}
#div1 {
width: 100px;
}
#journal1 {
margin-bottom: 2em;
}
JavaScript
const button1 = document.getElementById("button1");
const button2 = document.getElementById("button2");
const div1 = document.getElementById("div1");
const div2 = document.getElementById("div2");
const journal1 = document.getElementById("journal1");
const journal2 = document.getElementById("journal2");
// Vérifie si le scrollWidth est plus grand que le clientWidth ou non
function deborde(element) {
return element.scrollWidth > element.clientWidth;
}
function verifierDebordement(element, log) {
if (deborde(element)) {
log.innerText = `Le contenu déborde, scrollWidth est de ${element.scrollWidth}px`;
} else {
log.innerText = `Pas de débordement, scrollWidth est de ${element.scrollWidth}px`;
}
}
button1.addEventListener("click", () => {
verifierDebordement(div1, journal1);
});
button2.addEventListener("click", () => {
verifierDebordement(div2, journal2);
});
Résultat
Cliquez sur les boutons pour vérifier si le contenu déborde des conteneurs.
Spécifications
| Spécification |
|---|
| CSSOM View Module # dom-element-scrollwidth |
Compatibilité des navigateurs
Voir aussi
- Déterminer la taille des éléments
- La propriété
HTMLElement.offsetWidth - La propriété
Element.clientWidth - La propriété
Element.scrollHeight - La propriété
Element.scrollLeft - La propriété
Element.scrollTop - La méthode
Element.getBoundingClientRect() - La méthode
Element.scrollTo()