Testzeit – Scroll-Verankerung

Matt Gaunt

Haben Sie schon einmal eine Webseite besucht, einen Teil der Inhalte gelesen und die Seite knallt dann durch das Laden von Anzeigen oder Bildern auf und Sie verlieren Ihren Platz auf der Seite?

Es lohnt sich vielleicht, die Markierung „Scroll-Verankerung“ in Chrome 51 anzuschauen.

Mit der Scroll-Verankerung wird Ihre Position auf der Seite erfasst. So wird verhindert, dass die Position auf der Seite durch einen Umbruch beeinträchtigt wird.

So können Sie diese Funktion 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 das Scrollen als Verankerung aktiviert.

Wir verwenden die Funktion schon seit einiger Zeit und sind der Meinung, dass sie die Nutzerfreundlichkeit für alle Nutzer im Web drastisch verbessert, aber wir möchten sicherstellen, dass sie überall gut funktioniert. Wenn Sie auf Beispiele stoßen, bei denen Scroll-Anker keine Reflows auf der Seite verarbeiten konnten oder wo das Design nicht hätte eingreifen dürfen, würden wir unbedingt davon hören.

Über dieses Formular kannst du uns Feedback oder Beispiele zu unerwartetem Verhalten senden: g.co/reportbadreflow

Häufig gestellte Fragen

Wie wirkt sich diese Änderung auf das JavaScript-Scrolling aus?

Kurz gesagt: Das ist es nicht.

Diese Änderung wirkt sich auf das Scrollen aufgrund von Reflows aus. Wenn Sie beispielsweise einem Element einen Klassennamen hinzufügen, durch das seine Höhe erhöht wird, erfolgt der Umbruch und das Scrollen durch Verankerung verhindert, dass die Seite herumspringt.

Der Aufruf von window.scrollTo(0, 1) (Ja, der Old-School-Hack) führt nicht zu einem Reflow und funktioniert normal. Dasselbe gilt für Touch-Ereignisse.

Wenn Sie auf ein Beispiel stoßen, bei dem Scroll-Anker Ihre Seite beeinträchtigen, senden Sie uns bitte Feedback über dieses Formular: g.co/reportbadreflow