Element.scrollLeftMax — Eigenschaft · JavaScript-Referenz

Signatur

get Element.scrollLeftMax

Beschreibung

Element.scrollLeftMax liefert eine Zahl, die angibt, wie weit ein Element maximal nach links gescrollt werden kann – also den höchsten Wert, den scrollLeft annehmen kann. Ist der Inhalt nicht breiter als der sichtbare Bereich, ist der Wert 0.

Die Eigenschaft ist eine nicht standardisierte, Firefox-spezifische Erweiterung. In allen anderen Browsern ist sie undefined. Browserübergreifend erhält man denselben Wert über die Formel element.scrollWidth - element.clientWidth.

Nützlich ist der Wert zum Beispiel für horizontale Karussells, Tabellen mit Überbreite oder Fortschrittsanzeigen: Man kann prüfen, ob das rechte Ende erreicht ist, oder den Scrollfortschritt als Prozentwert berechnen.

Rückgabewert

Typ

number

Beschreibung

Maximaler horizontaler Scrollversatz in CSS-Pixeln (ganzzahlig). 0, wenn das Element nicht horizontal scrollbar ist. In Nicht-Firefox-Browsern ist die Eigenschaft undefined.

Beispiele

Maximalen Scrollversatz browserübergreifend ermitteln

// Fallback für Browser ohne scrollLeftMax
const getScrollLeftMax = (el) =>
  typeof el.scrollLeftMax === 'number'
    ? el.scrollLeftMax
    : el.scrollWidth - el.clientWidth;

const box = document.querySelector('.tabelle-wrapper');
console.log(`Maximal scrollbar: ${getScrollLeftMax(box)} px`);

Maximal scrollbar: 640 px

Erkennen, ob das rechte Ende eines Karussells erreicht ist

const carousel = document.querySelector('.carousel');
const nextBtn = document.querySelector('.carousel-next');

const updateButton = () => {
  const max = carousel.scrollLeftMax ?? (carousel.scrollWidth - carousel.clientWidth);
  // Toleranz von 1 px wegen Subpixel-Rundung
  nextBtn.disabled = carousel.scrollLeft >= max - 1;
};

carousel.addEventListener('scroll', updateButton, { passive: true });
updateButton();

Horizontalen Scrollfortschritt in Prozent anzeigen

const scroller = document.querySelector('#zeitleiste');
const anzeige = document.querySelector('#fortschritt');

scroller.addEventListener('scroll', () => {
  const max = scroller.scrollLeftMax ?? (scroller.scrollWidth - scroller.clientWidth);
  const prozent = max > 0 ? Math.round((scroller.scrollLeft / max) * 100) : 100;
  anzeige.textContent = `${prozent} %`;
}, { passive: true });

z. B. "42 %"

Direkt ans Ende scrollen

const liste = document.querySelector('.chips');
const max = liste.scrollLeftMax ?? (liste.scrollWidth - liste.clientWidth);
liste.scrollTo({ left: max, behavior: 'smooth' });

// Wichtig · Fallstricke

Kompatibilität: Nur in Firefox verfügbar, nicht Teil eines Standards. Chrome, Edge und Safari liefern undefined. Für produktiven Code immer scrollWidth - clientWidth als Fallback verwenden.
Schreibgeschützt: Eine Zuweisung wird ignoriert (im Strict Mode kann ein TypeError ausgelöst werden). Zum Scrollen scrollLeft oder scrollTo() verwenden.
Rechts-nach-links-Layouts (direction: rtl): scrollLeft ist dort 0 oder negativ, während scrollLeftMax positiv bleibt. Vergleiche daher mit Math.abs(el.scrollLeft).
Rundung: Der Wert ist ganzzahlig, scrollLeft kann bei Zoom oder hoher Pixeldichte gebrochene Werte haben – beim Vergleich eine kleine Toleranz einplanen.
Performance: Das Auslesen (wie auch scrollWidth/clientWidth) kann eine Layout-Berechnung erzwingen. In Scroll-Handlern keine Lese- und Schreibzugriffe auf das Layout abwechseln; gegebenenfalls requestAnimationFrame verwenden.

Siehe auch

Element.scrollTopMax Element.scrollLeft Element.scrollWidth Element.clientWidth Element.scrollTo() ElementInternals.ariaSort