Element : propriété scrollWidth

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.

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