Optimiertes Scrollen in Chrome 49

Paul Lewis

Wenn Nutzer wirklich etwas vom Scrollen wollen, dann, dass es flüssig ist. In der Vergangenheit war in Chrome an einigen Stellen ein optimiertes Scrollen möglich, z. B. wenn Nutzer mit dem Touchpad scrollen oder auf einem Mobilgerät um eine Seite blättern. Wenn der Nutzer jedoch eine Maus angeschlossen hat, würde er ein wackelndes „abgestuftes“ Scrollverhalten feststellen, was ästhetisch viel weniger ansprechend ist. Das wird sich in Chrome 49 ändern.

Die Lösung für das abgestufte, eingabegesteuerte Scrollverhalten bestand für viele Entwickler in der Verwendung von Bibliotheken, deren Ziel darin besteht, den Vorgang so umzugestalten, dass er für die Augen flüssiger und ansprechender ist. Auch die Nutzer tun dies über Erweiterungen. Sowohl Bibliotheken als auch Erweiterungen haben Nachteile, die das Scrollen ändern:

• Ein fantastisches Tal. Dies äußert sich in zweifacher Weise: Erstens kann das Scrollverhalten der einen Website reibungslos ablaufen, die andere aber nicht. Dies kann dazu führen, dass sich der Nutzer durch die Inkonsistenzen verwirrt. Zweitens stimmt die flüssige Physik der Bibliothek nicht unbedingt mit der der Plattform überein. Auch wenn die Bewegung zwar sanft ist, kann sie sich manchmal aber schlecht oder unheimlich anfühlen.
• Erhöhte Wahrscheinlichkeit von Konflikten und Verzögerungen im Hauptthread. Wie bei jedem JavaScript, das der Seite hinzugefügt wird, erhöht sich auch die CPU-Auslastung. Das ist zwar nicht unbedingt eine Katastrophe, je nachdem, was die Seite sonst noch tut, aber wenn lang andauernde Arbeit im Hauptthread erforderlich ist und das Scrollen mit dem Hauptthread gekoppelt ist, kann das Endergebnis zu stockenden Scrollvorgängen und Verzögerungen führen.
• Mehr Wartung für Entwickler, mehr Code, den Nutzer herunterladen können. Eine Bibliothek für ein reibungsloses Scrollen muss immer auf dem neuesten Stand gehalten und gepflegt werden. Dies wirkt sich wiederum positiv auf die Seitengröße der Website aus.

Diese Nachteile treten häufig auch bei vielen Bibliotheken auf, die sich mit Scrollverhalten befassen, sei es Parallaxe-Effekte oder andere scrollbare Animationen. Allzu oft verursachen sie Verzögerungen, beeinträchtigen die Barrierefreiheit und beeinträchtigen im Allgemeinen die User Experience. Scrollen ist eine zentrale Interaktion des Webs und das Ändern von Text in Bibliotheken sollte mit großer Sorgfalt erfolgen.

In Chrome 49 ändert sich das standardmäßige Scrollverhalten unter Windows, Linux und ChromeOS. Das alte, abgestufte Scrollen wird eingestellt und das Scrollen funktioniert standardmäßig flüssig. Es sind keine Änderungen an Ihrem Code erforderlich. Sie müssen vielleicht nur etwaige Bibliotheken mit Smooth Scrolling entfernen, sofern Sie sie verwendet haben.

Weitere Extras zum Scrollen

Es gibt noch weitere Extras, die das Scrollen betreffen, die ebenfalls erwähnenswert sind. Viele von uns wünschten sich durch Scrollen gekoppelte Effekte wie Parallaxe oder optimiertes Scrollen zu einem Dokumentfragment (z. B. beispiel.de/#somesection). Wie bereits erwähnt, können die heutigen 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 hilfreich sein 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 landen, können Sie damit JavaScript schreiben, das als Teil der Pipeline des Compositors ausgeführt wird. Das bedeutet im Allgemeinen, dass durch Scrollen gekoppelte Effekte wie Parallaxe perfekt mit der aktuellen Scrollposition synchron bleiben. Angesichts des aktuellen Scrollens, bei dem Scroll-Ereignisse nur regelmäßig an den Hauptthread gesendet werden und von anderen Hauptthreads blockiert werden können, wäre dies ein enormer Sprung nach vorn. Wenn Sie an Compositor-Worklets oder anderen spannenden neuen Funktionen von Houdini interessiert sind, sehen Sie sich den Beitrag Intro to Houdini (Einführung in Houdini) sowie die Spezifikationen von Houdini an und schreiben Sie Ihre Gedanken in die Houdini-Mailingliste.

Scrollverhalten

Beim fragmentbasierten Scrollen kann die CSS-Eigenschaft scroll-behavior ebenfalls hilfreich sein. Wenn Sie die neue Version testen möchten, können Sie sich freuen, dass sie in Firefox bereits verfügbar ist. Sie können sie dann in Chrome Canary über das Flag „Experimentelle Webplattformfunktionen aktivieren“ aktivieren. Wenn du beispielsweise das <body>-Element auf scroll-behavior: smooth setzt, werden alle Scrolls, die durch Fragmentänderungen oder durch window.scrollTo ausgelöst werden, flüssig animiert. Das ist viel besser, als Code aus einer Bibliothek verwenden und pflegen zu müssen, die versucht, dasselbe zu tun. Bei so etwas Grundlegendem wie dem Scrollen ist es wirklich wichtig, die Erwartungen der Nutzer nicht zu brechen. Diese Funktionen befinden sich zwar im Umbruch, es lohnt sich also, den Ansatz der progressiven Verbesserung zu verfolgen und alle Bibliotheken zu entfernen, die versuchen, diese Verhaltensweisen zu verankern.

Weiter und scrollen

Ab Chrome 49 wird das Scrollen flüssiger. Aber das ist noch nicht alles: Über Houdini- und Preisvergleichsportal-Properties wie smooth-scroll lassen sich noch weitere Verbesserungen erzielen. Probieren Sie Chrome 49 aus, sagen Sie uns Ihre Meinung und lassen Sie den Browser nach Möglichkeit scrollen!