Wenn es eine Sache gibt, die Nutzer beim Scrollen wirklich wollen, dann ist es ein flüssiges Scrollen. Bisher war das Scrollen in Chrome an einigen Stellen flüssig, z. B. wenn Nutzer mit dem Touchpad scrollten oder auf einem Mobilgerät eine Seite wischen. Wenn der Nutzer jedoch eine Maus angeschlossen hat, wird ein ruckeligeres, „stufiges“ Scrollen verwendet, was viel weniger ansprechend ist. Das ändert sich in Chrome 49.
Viele Entwickler haben das abgestufte, nativ eingabebasierte Scrollverhalten durch Bibliotheken gelöst, um es zu einem flüssigeren und angenehmeren Scrollen umzuwandeln. Nutzer tun dies auch über Erweiterungen. Sowohl Bibliotheken als auch Erweiterungen, die das Scrollen ändern, haben jedoch Nachteile:
- Das sogenannte „Uncanny Valley“-Gefühl. Das kann sich auf zwei Arten äußern: Erstens kann eine Website ein flüssiges Scrollverhalten haben, eine andere jedoch nicht. Das kann Nutzer verwirren. Zweitens stimmen die Physik-Regeln der Bibliothek nicht unbedingt mit denen der Plattform überein. Die Bewegung kann also zwar flüssig sein, aber trotzdem falsch oder unheimlich wirken.
- Höhere Wahrscheinlichkeit für Konflikte im Haupt-Thread und Ruckler. Wie bei jedem JavaScript, das der Seite hinzugefügt wird, steigt die CPU-Auslastung. Das ist nicht unbedingt ein Desaster, je nachdem, was sonst noch auf der Seite passiert. Wenn jedoch eine langwierige Arbeit im Hauptthread ausgeführt wird und das Scrollen mit dem Hauptthread gekoppelt ist, kann das zu ruckeligen Scrollvorgängen und Ruckeln führen.
- Mehr Wartungsaufwand für Entwickler, mehr Code für Nutzer zum Herunterladen. Eine Bibliothek für ein flüssiges Scrollen muss auf dem neuesten Stand gehalten und gepflegt werden. Außerdem erhöht sie das Gesamtgewicht der Seite.
Diese Nachteile treffen oft auch auf viele Bibliotheken zu, die sich mit Scroll-Verhalten befassen, z. B. mit Parallaxeeffekten oder anderen Scroll-gekoppelten Animationen. Sie führen allzu oft zu Rucklern, beeinträchtigen die Barrierefreiheit und beeinträchtigen im Allgemeinen die Nutzerfreundlichkeit. Das Scrollen ist eine zentrale Interaktion im Web und sollte mit Bibliotheken nur mit äußerster Vorsicht geändert werden.
In Chrome 49 wird das Standardscrollverhalten unter Windows, Linux und ChromeOS geändert. Das alte, abgehackte Scrollen wird eingestellt und das Scrollen ist standardmäßig flüssig. Es sind keine Änderungen am Code erforderlich, es sei denn, Sie haben Bibliotheken für flüssiges Scrollen verwendet.
Weitere Vorteile beim Scrollen
Es gibt noch weitere Neuigkeiten im Bereich Scrollen, die es wert sind, erwähnt zu werden. Viele von uns wünschen sich scrollsynchrone Effekte wie Parallaxe oder ein flüssiges Scrollen zu einem Dokumentfragment (z. B. beispiel.de/#einigesection). Wie bereits erwähnt, können die derzeit verwendeten Ansätze sowohl für Entwickler als auch für Nutzer schädlich sein. Es gibt zwei Plattformstandards, an denen derzeit gearbeitet wird und die helfen könnten: Compositor-Worklets und die CSS-Eigenschaft scroll-behavior.
Houdini
Compositor-Worklets sind Teil von Houdini und müssen noch vollständig spezifiziert und implementiert werden. Sobald die Patches verfügbar sind, können Sie JavaScript schreiben, das als Teil der Pipeline des 3D-Renderers ausgeführt wird. Das bedeutet im Allgemeinen, dass scrollsynchrone Effekte wie Parallaxing perfekt mit der aktuellen Scrollposition synchronisiert werden. Angesichts der aktuellen Verarbeitung des Scrollens, bei der Scrollereignisse nur periodisch an den Hauptthread gesendet werden (und von anderen Hauptthread-Aufgaben blockiert werden können), wäre dies ein großer Fortschritt. Wenn du dich für Compositor-Worklets oder eine der anderen spannenden neuen Funktionen von Houdini interessierst, lies dir den Einführungsartikel zu Houdini von Surma und die Houdini-Spezifikationen durch und teile deine Meinung in der Houdini-Mailingliste mit.
scroll-behavior
Bei fragmentbasiertem Scrollen kann auch die CSS-Eigenschaft scroll-behavior hilfreich sein. Wenn Sie es ausprobieren möchten, können Sie es in Chrome Canary mit dem Flag Enable experimental Web Platform features (Experimentelle Webplattformfunktionen aktivieren) aktivieren. Die Funktion ist bereits in Firefox verfügbar. Wenn Sie beispielsweise das <body>-Element auf scroll-behavior: smooth festlegen, werden alle Scrollbewegungen, die entweder durch Fragmentänderungen oder durch window.scrollTo ausgelöst werden, flüssig animiert. Das ist viel besser, als Code aus einer Bibliothek verwenden und verwalten zu müssen, der versucht, dasselbe zu tun. Bei einer so grundlegenden Funktion wie dem Scrollen ist es wirklich wichtig, die Erwartungen der Nutzer nicht zu enttäuschen. Auch wenn diese Funktionen sich ständig ändern, lohnt es sich, den Ansatz der progressiven Verbesserung zu verfolgen und alle Bibliotheken zu entfernen, die versuchen, diese Verhaltensweisen zu polyfillen.
Scrollen Sie los
Ab Chrome 49 wird das Scrollen noch flüssiger. Aber das ist noch nicht alles: Es gibt weitere potenzielle Verbesserungen, die durch Houdini und CSS-Eigenschaften wie smooth-scroll möglich sind. Probieren Sie Chrome 49 aus, teilen Sie uns Ihre Meinung mit und lassen Sie den Browser möglichst viel scrollen.