Element.scroll() — Methode · JavaScript-Referenz

Signatur

Element.prototype.scroll(x, y) | Element.prototype.scroll(options)

Beschreibung

Mit Element.scroll() setzt du die Scroll-Position eines Elements auf absolute Koordinaten innerhalb seines Inhalts. Das Element muss selbst scrollbar sein, also z. B. overflow: auto oder overflow: scroll haben und mehr Inhalt enthalten, als in den sichtbaren Bereich passt. Die Methode ist gleichwertig zu Element.scrollTo().

Es gibt zwei Aufrufformen: die klassische Form scroll(x, y) mit Pixelwerten und die Options-Form scroll({ top, left, behavior }). Nur die Options-Form erlaubt behavior: "smooth" für animiertes Scrollen, und du kannst darin einzelne Achsen weglassen, die dann unverändert bleiben.

Typische Einsatzfälle sind Chat-Fenster, die ans Ende springen sollen, das Zurücksetzen von Listen nach einem Filterwechsel, horizontale Karussells oder das Wiederherstellen einer gespeicherten Scroll-Position. Für relatives Scrollen (um einen Betrag verschieben) nimmst du Element.scrollBy(), um ein bestimmtes Kindelement sichtbar zu machen Element.scrollIntoView().

Parameter

Name	Typ	Default	Beschreibung
$x	number		Horizontale Zielposition in Pixeln (entspricht `scrollLeft`). Nur in der Zwei-Argument-Form.
$y	number		Vertikale Zielposition in Pixeln (entspricht `scrollTop`). Nur in der Zwei-Argument-Form.
$options	ScrollToOptions	{}	Objekt mit diesen Eigenschaften: `top` (`number`): vertikale Zielposition in Pixeln `left` (`number`): horizontale Zielposition in Pixeln `behavior` (`"auto" \| "instant" \| "smooth"`): Art des Scrollens, Standard `"auto"` (richtet sich nach CSS `scroll-behavior`) Fehlt eine Achse, bleibt ihre Position unverändert.

Beispiele

Chat-Verlauf ans Ende scrollen

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

const nachrichtHinzufuegen = (text) => {
  const p = document.createElement('p');
  p.textContent = text;
  chat.append(p);
  // Weich ans Ende scrollen
  chat.scroll({ top: chat.scrollHeight, behavior: 'smooth' });
};

nachrichtHinzufuegen('Hallo zusammen!');

Liste nach Filterwechsel zurücksetzen (klassische Form)

const liste = document.querySelector('.produktliste');
const filter = document.querySelector('#kategorie');

filter.addEventListener('change', () => {
  // Sofort nach oben links springen
  liste.scroll(0, 0);
  console.log(liste.scrollTop, liste.scrollLeft);
});

0 0

Horizontales Karussell seitenweise bewegen

const karussell = document.querySelector('.karussell');
const weiter = document.querySelector('#weiter');

weiter.addEventListener('click', () => {
  const naechsteSeite = karussell.scrollLeft + karussell.clientWidth;
  const max = karussell.scrollWidth - karussell.clientWidth;
  // Nur die horizontale Achse ändern, top bleibt erhalten
  karussell.scroll({ left: Math.min(naechsteSeite, max), behavior: 'smooth' });
});

Scroll-Position speichern und wiederherstellen

const bereich = document.querySelector('#artikel');

bereich.addEventListener('scrollend', () => {
  sessionStorage.setItem('artikelPos', String(bereich.scrollTop));
});

const gespeichert = Number(sessionStorage.getItem('artikelPos') ?? 0);
bereich.scroll({ top: gespeichert, behavior: 'instant' });

// Wichtig · Fallstricke

Kein Effekt ohne Überlauf: Ist das Element nicht scrollbar (kein overflow: auto/scroll oder Inhalt passt vollständig hinein), passiert nichts – ohne Fehlermeldung.
Werte werden begrenzt: Zu große oder negative Koordinaten werden auf den gültigen Bereich (0 bis scrollHeight - clientHeight) beschnitten.
Weiches Scrollen ist asynchron: Direkt nach dem Aufruf mit behavior: \"smooth\" hat scrollTop noch nicht den Zielwert. Nutze das scrollend-Event (Chrome 114+, Firefox 109+, Safari erst ab 26 bzw. teils fehlend) oder einen Fallback.
Barrierefreiheit: Respektiere prefers-reduced-motion und verzichte dann auf \"smooth\".
RTL-Layouts: Bei direction: rtl sind horizontale Werte in modernen Browsern 0 oder negativ.
Kompatibilität: Die Zwei-Argument-Form funktioniert überall außer im alten Internet Explorer/Edge Legacy auf Elementen; behavior im Options-Objekt unterstützt Safari erst ab 15.4. Für ältere Umgebungen kann man auf el.scrollTop = y ausweichen.
Für das gesamte Dokument verwende window.scroll() bzw. document.scrollingElement.scroll().

Siehe auch

Element.scrollTo() Element.scrollBy() Element.scrollIntoView() Element.scrollTop Element.scrollLeft Window.scroll()