Window.scrollByLines() — Methode · JavaScript-Referenz

Signatur

Window.prototype.scrollByLines(lines)

Beschreibung

window.scrollByLines() scrollt den Inhalt des Fensters um eine bestimmte Anzahl von Textzeilen. Die Richtung hängt vom Vorzeichen ab: positive Werte scrollen nach unten, negative nach oben. Wie hoch eine Zeile ist, legt der Browser selbst fest. In der Regel orientiert er sich an Schriftgröße und Zeilenhöhe des Dokuments, also an dem Wert, um den er auch bei einem Druck auf die Pfeiltaste scrollt.

Die Methode ist praktisch für Leseansichten, Terminal- oder Log-Ansichten und eigene Tastatursteuerungen, bei denen man eher in Zeilen als in Pixeln denkt. Im Gegensatz zu window.scrollBy() muss man keine Pixelwerte ausrechnen.

Wichtig: scrollByLines() gehört zu keinem Standard und wird nur von Firefox unterstützt. Chrome, Safari und Edge kennen die Methode nicht, der Aufruf löst dort einen TypeError aus. In produktivem Code sollte man deshalb vorher prüfen, ob die Methode vorhanden ist, und sonst auf window.scrollBy() mit einer selbst berechneten Zeilenhöhe ausweichen.

Parameter

Name	Typ	Default	Beschreibung
$lines Pflicht	number		Anzahl der Zeilen, um die gescrollt wird. Positive Werte scrollen nach unten, negative nach oben. Gedacht sind ganze Zahlen.
$options	{ behavior?: 'auto' \| 'smooth' \| 'instant' }	{ behavior: 'auto' }	Optionales Objekt, das Firefox in neueren Versionen annimmt. Mit `behavior` legt man fest, ob sanft (`'smooth'`) oder sofort gescrollt wird.

Rückgabewert

Typ

void

Beschreibung

Kein Rückgabewert (undefined).

Beispiele

Einfach: fünf Zeilen nach unten, zwei nach oben

// Nur in Firefox lauffähig
window.scrollByLines(5);   // 5 Zeilen nach unten
window.scrollByLines(-2);  // 2 Zeilen zurück nach oben
console.log(`Aktuelle Position: ${window.scrollY}px`);

Aktuelle Position: 57px // Wert hängt von der Zeilenhöhe ab

Browserübergreifend mit Fallback auf scrollBy()

const scrollLines = (lines) => {
  if (typeof window.scrollByLines === 'function') {
    window.scrollByLines(lines);
    return;
  }
  // Fallback: Zeilenhöhe aus dem berechneten Stil von <body> ermitteln
  const style = getComputedStyle(document.body);
  let lineHeight = parseFloat(style.lineHeight);
  if (Number.isNaN(lineHeight)) {
    // 'normal' -> ungefähr 1.2 × Schriftgröße
    lineHeight = parseFloat(style.fontSize) * 1.2;
  }
  window.scrollBy({ top: lines * lineHeight, behavior: 'smooth' });
};

scrollLines(3);

Tastatursteuerung für eine Leseansicht (J/K wie in vim)

const scrollLines = (n) =>
  typeof window.scrollByLines === 'function'
    ? window.scrollByLines(n)
    : window.scrollBy(0, n * 20); // grober Pixel-Fallback

const onKey = (event) => {
  // Nicht eingreifen, solange in Formularfeldern getippt wird
  if (event.target.matches('input, textarea, [contenteditable]')) return;
  if (event.key === 'j') scrollLines(1);
  if (event.key === 'k') scrollLines(-1);
};

document.addEventListener('keydown', onKey);
// Später wieder entfernen:
// document.removeEventListener('keydown', onKey);

// Wichtig · Fallstricke

Nicht standardisiert: Die Methode gibt es nur in Firefox. In Chromium-Browsern und Safari ist window.scrollByLines undefined, ein Aufruf wirft einen TypeError. Deshalb immer zuerst mit typeof window.scrollByLines === 'function' prüfen, ob sie vorhanden ist.
Die Methode scrollt nur vertikal und nur das Fenster. Für einzelne scrollbare Elemente gibt es kein Gegenstück. Dort nimmt man element.scrollBy().
Die Zeilenhöhe legt der Browser fest und kann von der CSS-Zeilenhöhe (line-height) des sichtbaren Inhalts abweichen. Wer pixelgenau scrollen muss, verwendet window.scrollBy().
Wenn das Dokument nicht scrollbar ist oder das Ende bereits erreicht ist, passiert nichts. Einen Fehler gibt es dann nicht.
Jeder Aufruf löst ein scroll-Event aus. Wer die Methode häufig aufruft (z. B. in einer Schleife), sollte die zugehörigen Event-Handler drosseln.

Siehe auch

new ScrollTimeline() Window.scrollByPages() Window.scrollBy() Window.scroll() Window.scrollTo()