Element: scrollWidth-Eigenschaft

Baseline Widely available

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

DiescrollWidth-Eigenschaft desElement-Interfaces ist eine schreibgeschützte Eigenschaft, die die Breite des Inhalts eines Elements misst, einschließlich des Inhalts, der aufgrund von Überlauf nicht auf dem Bildschirm sichtbar ist.

DerscrollWidth-Wert entspricht der Mindestbreite, die das Element benötigen würde, um den gesamten Inhalt im Ansichtsfenster unterzubringen, ohne eine horizontale Scrollleiste zu verwenden. Die Breite wird auf die gleiche Weise wieclientWidth gemessen: Sie umfasst das Padding des Elements, aber nicht dessen Rand, äußere Abstände oder die vertikale Scrollleiste (falls vorhanden). Sie kann auch die Breite von Pseudo-Elementen wie::before oder::after einschließen. Wenn der Inhalt des Elements ohne eine horizontale Scrollleiste passt, ist diescrollWidth gleich derclientWidth.

Wert

Ein ganzzahliger Wert.

Beispiele

Erkennen von überfließendem Inhalt

In diesem Beispiel verwenden wir diescrollWidth-Eigenschaft, um zu überprüfen, ob der Inhalt eines Elements seine Grenzen überschreitet. Wir haben zweidiv-Elemente, das erste mit einer Breite von100px und das zweite ohne feste Breite. Ihr Inhalt ist genau gleich, und wir zeigen eine Nachricht darüber an, ob jedes von ihnen seinen Container überläuft.

HTML

html

<div>FooBar-FooBar-FooBar-FooBar</div><button>Check for overflow</button><pre></pre><div>FooBar-FooBar-FooBar-FooBar</div><button>Check for overflow</button><pre></pre>

CSS

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;}#log1 {  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 log1 = document.getElementById("log1");const log2 = document.getElementById("log2");// Check if the scrollWidth is bigger than the clientWidth or notfunction isOverflowing(element) {  return element.scrollWidth > element.clientWidth;}function checkOverflow(element, log) {  if (isOverflowing(element)) {    log.innerText = `Content is overflowing, scrollWidth is ${element.scrollWidth}px`;  } else {    log.innerText = `No overflows, scrollWidth is ${element.scrollWidth}px`;  }}button1.addEventListener("click", () => {  checkOverflow(div1, log1);});button2.addEventListener("click", () => {  checkOverflow(div2, log2);});