Element.scrollHeight — Eigenschaft · JavaScript-Referenz

Signatur

Element.scrollHeight

Beschreibung

scrollHeight gibt die Höhe zurück, die ein Element bräuchte, um seinen gesamten Inhalt ohne vertikale Scrollleiste anzuzeigen. Der Wert enthält das Padding, aber weder Rahmen (Border) noch Außenabstand (Margin) noch eine horizontale Scrollleiste. Auch Pseudo-Elemente wie ::before und ::after werden mitgezählt.

Passt der Inhalt ohne Überlauf in das Element, ist scrollHeight gleich clientHeight. Ist er größer, lässt sich mit dem Vergleich el.scrollHeight > el.clientHeight feststellen, ob gescrollt werden kann.

Typische Anwendungsfälle:

Erkennen, ob ein Nutzer ans Ende eines scrollbaren Bereichs gelangt ist (z. B. AGB gelesen, unendliches Scrollen).
Textareas, die automatisch mit dem Inhalt mitwachsen.
Chat-Fenster automatisch ganz nach unten scrollen (el.scrollTop = el.scrollHeight).
Ausklapp-Animationen, bei denen die Zielhöhe des Inhalts bekannt sein muss.

Der Wert wird immer auf eine ganze Zahl gerundet. Für Nachkommagenauigkeit dient getBoundingClientRect() (allerdings ohne Überlaufanteil).

Rückgabewert

Typ

number

Beschreibung

Ganzzahlige Höhe des gesamten Inhalts in CSS-Pixeln, inklusive Padding, ohne Border, Margin und horizontale Scrollleiste. Nur lesbar.

Beispiele

Prüfen, ob ein Element überläuft

const box = document.querySelector('#nachrichten');

const istScrollbar = box.scrollHeight > box.clientHeight;
console.log(`Inhalt: ${box.scrollHeight}px, sichtbar: ${box.clientHeight}px`);
console.log(istScrollbar ? 'Scrollleiste nötig' : 'Alles sichtbar');

Inhalt: 840px, sichtbar: 300px Scrollleiste nötig

Erkennen, ob bis zum Ende gescrollt wurde (AGB-Bestätigung)

const agb = document.querySelector('#agb');
const button = document.querySelector('#zustimmen');
button.disabled = true;

agb.addEventListener('scroll', () => {
  // Toleranz von 1px wegen gebrochener scrollTop-Werte bei Zoom
  const amEnde = Math.abs(agb.scrollHeight - agb.clientHeight - agb.scrollTop) <= 1;
  if (amEnde) {
    button.disabled = false;
    console.log('AGB vollständig gelesen');
  }
});

AGB vollständig gelesen

Automatisch wachsende Textarea

const textarea = document.querySelector('textarea');

const hoeheAnpassen = () => {
  textarea.style.height = 'auto'; // zurücksetzen, damit sie auch schrumpfen kann
  textarea.style.height = `${textarea.scrollHeight}px`;
};

textarea.addEventListener('input', hoeheAnpassen);
hoeheAnpassen();

Chat-Verlauf nach neuer Nachricht nach unten scrollen

const chat = document.querySelector('#chat');

const nachrichtHinzufuegen = (text) => {
  const p = document.createElement('p');
  p.textContent = text;
  chat.append(p);
  chat.scrollTop = chat.scrollHeight; // ganz nach unten
};

nachrichtHinzufuegen('Hallo zusammen!');

// Wichtig · Fallstricke

Rundung: scrollHeight liefert immer eine ganze Zahl, scrollTop kann dagegen Nachkommastellen haben (z. B. bei Seitenzoom). Vergleiche wie scrollTop + clientHeight === scrollHeight schlagen deshalb oft fehl – immer eine Toleranz von ca. 1px verwenden.
Layout-Neuberechnung: Das Lesen von scrollHeight erzwingt ein synchrones Layout (Reflow). In Schleifen oder häufigen Scroll-Handlern abwechselnd lesen und schreiben vermeiden (Layout-Thrashing); ggf. requestAnimationFrame nutzen.
Gesamtes Dokument: Für die Höhe der ganzen Seite document.documentElement.scrollHeight verwenden; im Quirks-Modus liefert stattdessen document.body den Wert.
Elemente mit display: none oder nicht im DOM eingehängte Elemente liefern 0.
Bei Inline-Elementen ohne CSS-Layout-Box ist der Wert ebenfalls 0.
Die Eigenschaft ist schreibgeschützt; Zuweisungen werden stillschweigend ignoriert. Wird in allen modernen Browsern einheitlich unterstützt.

Siehe auch

Element.scrollTop Element.clientHeight HTMLElement.offsetHeight Element.scrollWidth Element.getBoundingClientRect() ElementInternals.ariaRowSpan