Window.scrollMaxX — Eigenschaft · JavaScript-Referenz

Signatur

Window.scrollMaxX

Beschreibung

window.scrollMaxX liefert die größtmögliche horizontale Scroll-Position des Dokuments in CSS-Pixeln. Setzt man window.scrollX bzw. window.scrollTo() auf diesen Wert, ist der rechte Rand des Dokuments erreicht. Ist das Dokument nicht breiter als der Viewport, ist der Wert 0.

Typische Anwendungsfälle sind Scroll-Fortschrittsanzeigen, „Ans Ende scrollen“-Buttons und die Prüfung, ob der Nutzer den rechten Rand erreicht hat. Die Eigenschaft ist allerdings nicht standardisiert und wird nur von Firefox unterstützt.

In allen Browsern gleich funktioniert die Berechnung über document.documentElement.scrollWidth - document.documentElement.clientWidth. Das liefert denselben Wert und sollte in produktivem Code bevorzugt oder zumindest als Fallback verwendet werden.

Rückgabewert

Typ

number

Beschreibung

Maximale horizontale Scroll-Position in CSS-Pixeln (0, wenn nicht horizontal gescrollt werden kann). In Browsern ohne Unterstützung ist der Wert undefined.

Beispiele

Maximale horizontale Scroll-Position auslesen (mit Fallback)

const getScrollMaxX = () =>
  typeof window.scrollMaxX === 'number'
    ? window.scrollMaxX
    : document.documentElement.scrollWidth - document.documentElement.clientWidth;

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

Maximal scrollbar: 1240 px

Horizontalen Scroll-Fortschritt in Prozent anzeigen

const maxX = () =>
  window.scrollMaxX ??
  document.documentElement.scrollWidth - document.documentElement.clientWidth;

window.addEventListener('scroll', () => {
  const max = maxX();
  const progress = max > 0 ? Math.round((window.scrollX / max) * 100) : 100;
  console.log(`Horizontaler Fortschritt: ${progress} %`);
}, { passive: true });

Horizontaler Fortschritt: 42 %

Button: ganz nach rechts scrollen

const button = document.querySelector('#nach-rechts');

button.addEventListener('click', () => {
  const max = window.scrollMaxX ??
    document.documentElement.scrollWidth - document.documentElement.clientWidth;
  window.scrollTo({ left: max, behavior: 'smooth' });
});

// Wichtig · Fallstricke

Kompatibilität: Die Eigenschaft ist nicht standardisiert und gibt es nur in Firefox. Chrome, Safari und Edge liefern undefined. Verlasse dich nie allein darauf, sondern nutze immer den Fallback scrollWidth - clientWidth.
Die Eigenschaft ist schreibgeschützt. Eine Zuweisung hat keine Wirkung. Zum Scrollen dienen window.scrollTo() und window.scrollBy().
Bei Schreibrichtung von rechts nach links (dir=\"rtl\") ist scrollX meist negativ oder 0. Berechnungen mit scrollMaxX müssen das berücksichtigen.
Der Wert ändert sich, wenn sich Fenstergröße, Zoom oder Inhalt ändern. Lies ihn deshalb bei Bedarf neu aus und speichere ihn nicht dauerhaft zwischen.
Die Werte können gebrochene Zahlen sein, zum Beispiel bei Zoom oder hochauflösenden Displays. Vergleiche daher mit einer kleinen Toleranz, etwa Math.abs(max - scrollX) < 1.

Siehe auch

Window.scrollMaxY Window.scrollX Window.scrollTo() Element.scrollWidth Element.clientWidth History.scrollRestoration TextTrackCue.track