Window.scrollX — Eigenschaft · JavaScript-Referenz

Signatur

window.scrollX

Beschreibung

Die schreibgeschützte Eigenschaft window.scrollX gibt an, wie weit das Dokument im Viewport horizontal gescrollt ist, in CSS-Pixeln. Der Wert ist 0, wenn der linke Rand des Dokuments am linken Rand des Viewports liegt. Positive Werte bedeuten, dass nach rechts gescrollt wurde.

Moderne Browser liefern einen Gleitkommawert mit Subpixel-Genauigkeit, z. B. 123.5 auf hochauflösenden Displays oder bei Zoom. Brauchst du ganze Zahlen, runde mit Math.round().

Typische Einsatzfälle sind: absolute Seitenkoordinaten aus getBoundingClientRect() berechnen (Viewport-Koordinaten + scrollX), eine Scroll-Position speichern und später wiederherstellen, und horizontale Scroll-Fortschrittsanzeigen oder Parallax-Effekte umsetzen. Das Gegenstück für die vertikale Richtung ist window.scrollY.

Die Eigenschaft kannst du nicht beschreiben. Um die Scroll-Position zu ändern, nutzt du window.scrollTo(), window.scrollBy() oder element.scrollIntoView(). window.pageXOffset ist ein Alias mit identischem Wert.

Rückgabewert

Typ

number

Beschreibung

Horizontaler Scroll-Versatz des Dokuments in CSS-Pixeln (Gleitkommazahl, eventuell mit Subpixel-Anteil). Bei Schreibrichtung von rechts nach links (dir="rtl") kann der Wert 0 oder negativ sein.

Beispiele

Aktuelle horizontale Scroll-Position auslesen

// Seite zuerst horizontal scrollen, danach den Wert prüfen
window.scrollTo({ left: 250, top: 0 });
console.log(`Horizontal gescrollt: ${window.scrollX}px`);

Horizontal gescrollt: 250px (vorausgesetzt, das Dokument ist breit genug)

Absolute Seitenkoordinaten eines Elements berechnen

const getPagePosition = (el) => {
  const rect = el.getBoundingClientRect(); // relativ zum Viewport
  return {
    left: rect.left + window.scrollX,
    top: rect.top + window.scrollY,
  };
};

const box = document.querySelector('#tooltip-anker');
console.log(getPagePosition(box));

{ left: 812, top: 1430 }

Scroll-Position merken und wiederherstellen

// Vor dem Neuladen einer Tabellenansicht speichern
const savePosition = () => {
  sessionStorage.setItem('scrollPos', JSON.stringify({
    x: window.scrollX,
    y: window.scrollY,
  }));
};

const restorePosition = () => {
  const saved = sessionStorage.getItem('scrollPos');
  if (!saved) return;
  const { x, y } = JSON.parse(saved);
  window.scrollTo(x, y);
};

window.addEventListener('pagehide', savePosition);
window.addEventListener('load', restorePosition);

Horizontalen Scroll-Fortschritt performant anzeigen

const bar = document.querySelector('#progress');
let ticking = false;

window.addEventListener('scroll', () => {
  if (ticking) return;
  ticking = true;
  requestAnimationFrame(() => {
    const max = document.documentElement.scrollWidth - window.innerWidth;
    const percent = max > 0 ? (window.scrollX / max) * 100 : 0;
    bar.style.width = `${percent.toFixed(1)}%`;
    ticking = false;
  });
}, { passive: true });

// Wichtig · Fallstricke

Schreibgeschützt: Eine Zuweisung wie window.scrollX = 100 scrollt nicht. Verwende stattdessen window.scrollTo() oder window.scrollBy().
Subpixel-Werte: Der Wert kann Nachkommastellen haben. Vergleiche wie scrollX === 100 können deshalb fehlschlagen. Runde vorher oder arbeite mit einer Toleranz.
RTL-Layouts: Bei dir="rtl" startet scrollX bei 0 und wird beim Scrollen nach links negativ. Ältere Browser haben das uneinheitlich umgesetzt.
Nur für den Viewport: scrollX gilt nur für das Dokument. Für scrollbare Container-Elemente nimmst du element.scrollLeft.
Performance: Wenn du den Wert liest, nachdem du Layout-relevante Stile geändert hast, erzwingt der Browser eine synchrone Layout-Berechnung (Reflow). Lies den Wert in Scroll-Handlern deshalb gebündelt über requestAnimationFrame und registriere den Listener mit { passive: true }.
Kompatibilität: Alle modernen Browser unterstützen die Eigenschaft. Internet Explorer kennt nur window.pageXOffset, das ein Alias mit gleichem Wert ist. Ein Fallback für sehr alte Umgebungen: document.documentElement.scrollLeft.

Siehe auch

Window.scrollY Window.scrollTo() Window.scrollBy() Element.scrollLeft Element.getBoundingClientRect()