Window.scrollMaxY — Eigenschaft · JavaScript-Referenz

Signatur

Window.scrollMaxY

Beschreibung

Die schreibgeschützte Eigenschaft Window.scrollMaxY liefert die größtmögliche vertikale Scroll-Position des Dokuments in CSS-Pixeln. Anders gesagt: Sie gibt an, wie weit man nach unten scrollen kann, bis das Ende des Dokuments erreicht ist. Der Wert entspricht ungefähr document.documentElement.scrollHeight - document.documentElement.clientHeight.

Typische Anwendungsfälle sind Lesefortschrittsanzeigen, „Nach oben“-Schaltflächen oder das Erkennen, ob der Nutzer das Seitenende erreicht hat (etwa für unendliches Nachladen). In Verbindung mit window.scrollY lässt sich so der prozentuale Scroll-Fortschritt berechnen.

Wichtig: Die Eigenschaft ist nicht standardisiert und wird nur von Firefox unterstützt. In Chrome, Safari und Edge ist sie undefined. Für produktiven Code sollte man daher immer die standardkonforme Berechnung über scrollHeight und clientHeight verwenden oder zumindest einen Fallback vorsehen.

Rückgabewert

Typ

number

Beschreibung

Maximale vertikale Scroll-Position in CSS-Pixeln (ganzzahlig). 0, wenn das Dokument nicht vertikal scrollbar ist. In Nicht-Firefox-Browsern ist die Eigenschaft undefined.

Beispiele

Maximale Scroll-Position auslesen (mit Fallback)

// Browserübergreifende Hilfsfunktion
const getScrollMaxY = () =>
  typeof window.scrollMaxY === 'number'
    ? window.scrollMaxY
    : document.documentElement.scrollHeight - document.documentElement.clientHeight;

console.log(`Maximal scrollbar: ${getScrollMaxY()} px`);

Maximal scrollbar: 2480 px

Lesefortschritt in Prozent anzeigen

const progressBar = document.querySelector('#progress');

const getScrollMaxY = () =>
  window.scrollMaxY ??
  document.documentElement.scrollHeight - document.documentElement.clientHeight;

const updateProgress = () => {
  const max = getScrollMaxY();
  const percent = max > 0 ? (window.scrollY / max) * 100 : 100;
  progressBar.style.width = `${percent.toFixed(1)}%`;
};

window.addEventListener('scroll', updateProgress, { passive: true });
updateProgress();

Seitenende erkennen und Inhalte nachladen

const getScrollMaxY = () =>
  window.scrollMaxY ??
  document.documentElement.scrollHeight - document.documentElement.clientHeight;

const loadMore = async () => {
  const response = await fetch('/api/artikel?offset=20');
  const items = await response.json();
  console.log(`${items.length} weitere Artikel geladen`);
};

window.addEventListener('scroll', () => {
  // 100 px Puffer vor dem Ende
  if (window.scrollY >= getScrollMaxY() - 100) {
    loadMore();
  }
}, { passive: true });

20 weitere Artikel geladen

Direkt ans Seitenende springen

const maxY = window.scrollMaxY ??
  document.documentElement.scrollHeight - document.documentElement.clientHeight;

window.scrollTo({ top: maxY, behavior: 'smooth' });

// Wichtig · Fallstricke

Nicht standardisiert: Nur Firefox (Gecko) unterstützt scrollMaxY. Chrome, Edge und Safari liefern undefined – ohne Fallback entstehen dort Berechnungen mit NaN.
Standardkonforme Alternative: document.documentElement.scrollHeight - document.documentElement.clientHeight funktioniert in allen Browsern.
Nicht ideal für Zoom/Subpixel: Der Wert ist ganzzahlig; window.scrollY kann bei Zoom oder hochauflösenden Displays Nachkommastellen haben. Vergleiche wie scrollY === scrollMaxY daher besser mit Toleranz (z. B. >= max - 1) durchführen.
Dynamische Inhalte: Der Wert ändert sich, sobald Inhalte nachgeladen, Bilder geladen oder das Fenster in der Größe verändert wird – nicht zwischenspeichern, sondern bei Bedarf neu auslesen.
Performance: Das Auslesen kann ein Layout (Reflow) erzwingen. In scroll-Handlern passive Listener und ggf. requestAnimationFrame nutzen.
Die Eigenschaft ist schreibgeschützt; Zuweisungen werden ignoriert.

Siehe auch

Window.scrollMaxX Window.scrollY Element.scrollHeight Element.clientHeight Window.scrollTo() UIEvent.which