Signatur
Beschreibung
window.scrollByPages() scrollt den Inhalt des Fensters relativ zur aktuellen Position um eine ganze Zahl von „Seiten“. Eine Seite entspricht ungefähr der sichtbaren Höhe des Anzeigebereichs, also etwa dem Sprung, den die Tasten Bild ab bzw. Bild auf auslösen. Der Browser lässt dabei eine kleine Überlappung stehen, damit der Lesefluss nicht abreißt.
Die Methode ist praktisch für Leseansichten, Präsentationen oder eigene Tastatursteuerungen, bei denen man seitenweise blättern möchte. Man muss dafür keine Pixelabstände selbst ausrechnen.
Wichtig: scrollByPages() ist nicht standardisiert und wird nur von Firefox unterstützt. Für Code, der in allen Browsern laufen soll, verwendet man window.scrollBy() zusammen mit window.innerHeight oder document.documentElement.clientHeight. Dieser Ersatz lässt sich auch mit sanftem Scrollen (behavior: "smooth") kombinieren.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $pages Pflicht | number | Anzahl der Seiten, um die gescrollt wird. Positive Werte scrollen nach unten, negative nach oben. Nachkommastellen werden abgeschnitten, deshalb am besten ganze Zahlen übergeben. |
Rückgabewert
undefined).Beispiele
Eine Seite nach unten scrollen (mit Feature-Erkennung)
// Nur Firefox kennt scrollByPages – daher vorher prüfen
if (typeof window.scrollByPages === "function") {
window.scrollByPages(1);
} else {
window.scrollBy(0, window.innerHeight * 0.9);
}
console.log("Neue Position:", Math.round(window.scrollY));Browserübergreifende Hilfsfunktion zum seitenweisen Scrollen
const scrollPages = (pages, smooth = true) => {
if (typeof window.scrollByPages === "function" && !smooth) {
window.scrollByPages(pages);
return;
}
// Etwas Überlappung lassen, wie bei Bild ab / Bild auf
const pageHeight = document.documentElement.clientHeight * 0.9;
window.scrollBy({ top: pages * pageHeight, behavior: smooth ? "smooth" : "auto" });
};
scrollPages(2); // zwei Seiten nach unten
scrollPages(-1); // eine Seite zurückBlätter-Schaltflächen in einer Leseansicht
// HTML: <button id="prev">Zurück</button> <button id="next">Weiter</button>
const turnPage = (direction) => {
if ("scrollByPages" in window) {
window.scrollByPages(direction);
} else {
window.scrollBy({ top: direction * window.innerHeight * 0.9, behavior: "smooth" });
}
};
document.querySelector("#next").addEventListener("click", () => turnPage(1));
document.querySelector("#prev").addEventListener("click", () => turnPage(-1));// Wichtig · Fallstricke
- Nicht standardisiert: Die Methode gehört zu keiner Spezifikation und ist nur in Firefox vorhanden. Chrome, Edge und Safari kennen sie nicht, ein Aufruf dort wirft einen
TypeError. Deshalb immer vorher mittypeof window.scrollByPages === "function"prüfen oder direktscrollBy()verwenden. - Die Methode scrollt nur vertikal und nur das Fenster selbst, nicht einzelne scrollbare Elemente. Für Container verwendet man
element.scrollBy(). - Es gibt keine Option für sanftes Scrollen. Wer Animationen möchte, nimmt
window.scrollBy({ top, behavior: "smooth" }). - Wie weit eine „Seite“ genau reicht, legt der Browser fest. Dabei bleibt eine kleine Überlappung stehen. Wenn du das Verhalten mit
scrollBy()nachbaust, wähle die Überlappung selbst, zum Beispiel 90 % voninnerHeight. - Am Anfang oder Ende des Dokuments wird nicht weiter gescrollt. Es tritt dann kein Fehler auf.