Element : propriété scrollWidth

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 ne serait pas visible à l'écran en raison d'un dépassement.

La valeur scrollWidth est égale à la largeur minimale dont l'élément aurait 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 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 sera égale à clientWidth.

Note : Cette propriété arrondira la valeur à un nombre entier. Si vous avez besoin d'une valeur fractionnaire, utilisez element.getBoundingClientRect().

Valeur

Un nombre.

Exemples

HTML

html
<div id="uneDiv">TotoTruc-TotoTruc-TotoTruc-TotoTruc</div>
<button id="unBouton">Vérifier le débordement</button>

<div id="uneAutreDiv">TotoTruc-TotoTruc-TotoTruc-TotoTruc</div>
<button id="unAutreBouton">Vérifier le débordement</button>

CSS

css
div {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#uneDiv {
  width: 100px;
}

button {
  margin-bottom: 2em;
}

JavaScript

js
const boutonUn = document.getElementById("unBouton");
const boutonDeux = document.getElementById("unAutreBouton");
const blocUn = document.getElementById("uneDiv");
const blocDeux = document.getElementById("uneAutreDiv");

// vérifie pour déterminer si un débordement se produit
function isOverflowing(element) {
  return element.scrollWidth > element.offsetWidth;
}

function alertOverflow(element) {
  if (isOverflowing(element)) {
    alert("Le contenu a débordé du cadre.");
  } else {
    alert("Aucun débordement !");
  }
}

boutonUn.addEventListener("click", () => {
  alertOverflow(blocUn);
});
boutonDeux.addEventListener("click", () => {
  alertOverflow(blocDeux);
});

Résultat

Spécifications

Specification
CSSOM View Module
# dom-element-scrollwidth

Compabilité des navigateurs

BCD tables only load in the browser

Voir aussi