Testzeit – Scroll-Verankerung

Matt Gaunt

Haben Sie schon einmal eine Webseite besucht, sich die Inhalte angesehen und dann festgestellt, dass die Seite sich aufgrund des Ladens von Anzeigen oder Bildern verschoben hat, sodass Sie Ihren Platz auf der Seite verloren haben?

Vielleicht sollten Sie sich das Flag „Scroll Anchoring“ in Chrome 51 ansehen.

Mit dem Scroll-Ankern wird Ihre Position auf der Seite gespeichert und verhindert, dass ein Reflow Ihre Position auf der Seite beeinträchtigt.

So kannst du diese Funktion selbst ausprobieren:

  1. Rufen Sie in Chrome Dev / Canary chrome://flags/#enable-scroll-anchoring auf.
  2. Wählen Sie im Drop-down-Menü die Option „Aktiviert“ aus.
  3. Klicken Sie unten auf dem Bildschirm auf Jetzt neu starten.

Damit ist die Scrollanpassung aktiviert.

Wir verwenden diese Funktion schon seit einiger Zeit und sind der Meinung, dass sie die Nutzerfreundlichkeit für alle Nutzer im Web deutlich verbessert. Wir möchten jedoch dafür sorgen, dass sie überall gut funktioniert. Wenn Sie Beispiele finden, bei denen das Scroll-Ankern Reflows auf der Seite nicht verarbeitet hat oder bei denen es nicht hätte eingreifen sollen, teilen Sie uns das bitte mit.

Wenn Sie uns Feedback zu oder Beispiele für unerwartetes Verhalten senden möchten, füllen Sie bitte dieses Formular aus: g.co/reportbadreflow

FAQ

Wie wirkt sich diese Änderung auf das Scrollen mit JavaScript aus?

Kurz gesagt: Nein.

Diese Änderung wirkt sich auf das Scrollen aus, das durch Neuformatierungen verursacht wird. Wenn Sie beispielsweise einem Element einen Klassennamen hinzufügen, durch den sich seine Höhe erhöht, führt dies zu einem Neufluss. Durch das Scroll-Ankern wird verhindert, dass die Seite springt.

Das Aufrufen von window.scrollTo(0, 1) (ja, der alte Hack) führt nicht zu einem Neuaufbau und das Element verhält sich normal. Dasselbe gilt für Touch-Ereignisse.

Wenn Sie ein Beispiel finden, bei dem sich die Scrollanpassung auf Ihre Seite auswirkt, senden Sie uns bitte Feedback über dieses Formular: g.co/reportbadreflow