scrollBy() – Scrollt das Fenster um vorgegebenen Pixelanzahl
Über die JavaScript-Anweisung scrollBy() wird der Fensterinhalt um die angegebene Pixelanzahl gescrollt.
Der grundlegende Aufbau des JavaScript-Befehls sieht wie folgt aus:
window.scrollBy(X-Position, Y-Position);
Die Methode scrollBy() gehört zu den Browserobjekt „window“. Das Verhalten kann direkt in der Konsole getestet werden. Über die folgende Angabe bewegt sich der Anzeigebereich um 100 Pixel nach rechts und um 150 Pixel nach unten (sofern er es kann).
window.scrollBy(100,150);
Diese Anweisung kann man öfters aufführen und es wird immer weiter um 100 Pixel nach rechts und um 150 Pixel nach unten gescrollt. Allerdings nur, wenn dort auch „hingescrollt“ werden kann. Bei modernen Webseiten wird aus Gründen der Optimierung für Handy und kleine Anzeigebildschirme automatisch die benötigte Breite für die komplette Anzeige des Inhalts umgeschaltet. Daher wird das Scrollen nach rechts und links meistens nicht klappen.
Das Scrollen nach Unten und Oben funktioniert nur, wenn noch Inhalt folgt. Wir bekommen keine Rückmeldung von JavaScript, ob das Scrollen erfolgreich war.
Einfach mal probieren!
Sanftes/weiches Scrollen mit scrollBy()
Weiches Scrollen wird durch die Angabe eines dritten Parameters mit dem Verhalten (engl. „behavior“) und dem Parameterwert „smooth” (Bedeutung in englisch ist „glatt, weich, geschmeidig“) erreicht.
Allerdings müssen alle drei Parameter durch eine geschweifte Klammer umschlossen werden, wie man im folgenden Beispielcode sieht. Einfach bitte die folgende JavaScript-Anweisung in der Konsole testen.
window.scrollBy({ top: 200, left: 100, behavior: "smooth" });
Die Angabe mit „top“ und „left“ mag im ersten Augenblick irritieren, aber dieser Aufbau ist identisch wie bei scrollTo. Der Befehl scrollTo springt (bzw. scrollt) zu einer vorgegebenen Koordinate. Daher macht es Sinn hier den gleichen Aufbau der Parameter zu haben, wenn auch beide Befehle eine ähnliche Funktion haben.
Funktioniert das Scrollen sanft und weich und nicht sprunghaft, dann nutzt man den „richtigen“ Browser. Die Browser „Google Chrome“ und „Firefox“ unterstützen das sanfte Scrollen von Haus aus. Die Browser von Microsoft und Apples Safari zum jetzigen Zeitpunkt noch nicht.
Workaround/Polyfill für weiches Scrollen für alle Browser
Ist das weiche Scrollen unverzichtbar, weil sonst der ganze Effekt der Webseite nicht vorhanden ist, wie z.B. bei Onepage-Websites, dann benötigen wir ein Workaround bzw. ein Polyfill. Hier bitte den letzten Absatz beim Kapitel „scrollTo() – Springen zu vorgegebenen Koordinaten“ unter javascript-scrollTo.htm lesen.