Scroll-behavior | CSS-Tricks

Die CSS-Eigenschaft scroll-behavior ermöglicht es uns zu definieren, ob die Scroll-Position des Browsers bei einem Klick auf einen Link, der auf eine verankerte Position innerhalb eines scrollbaren Bereichs verweist, zu einer neuen Position springt oder den Übergang sanft animiert.

html {
  scroll-behavior: smooth;
}

Detailliertere Erklärung

Moment, Moment, was meinen wir mit diesem scrollbaren Bereich? Das ist ein Element, dessen Inhalt seine Grenzen überschreitet.

Siehe den Pen Scrollbarer Bereich von CSS-Tricks (@css-tricks) auf CodePen.

Beachten Sie, dass der Bereich im obigen Demo eine feste Höhe von 200px hat? Jeder Inhalt, der diese Höhe überschreitet, befindet sich außerhalb der Grenzen des Bereichs, und wir haben overflow-y: scroll hinzugefügt, um diesen zusätzlichen Inhalt durch vertikales Scrollen zugänglich zu machen. Das ist es, was wir mit einem scrollbaren Bereich meinen.

Nehmen wir nun an, wir fügen eine Navigation am oberen Rand des Bereichs hinzu, wobei jeder Link auf die drei Inhaltsbereiche verweist.

Siehe den Pen Scrollbarer Bereich mit Navigation von CSS-Tricks (@css-tricks) auf CodePen.

Jeder Link führt den Benutzer direkt zu den verschiedenen Inhaltsbereichen innerhalb des scrollbaren Bereichs. Standardmäßig ist dieser Übergang ein abrupter Sprung.

Der Sprung zwischen den Inhalten ist standardmäßig abrupt und plötzlich.

Eine solche Sprungbewegung kann störend sein. Hier kommt scroll-behavior ins Spiel und ermöglicht es uns, einen sanften Scroll-Übergang einzustellen. Früher war so etwas mit raffiniertem Javascript möglich, aber scroll-behavior gibt uns die Möglichkeit, dies nativ in CSS zu tun, sobald die Browserunterstützung verbessert ist.

Der Sprung zwischen den Inhalten wird in einem sanften Übergang animiert.

Syntax

.module {
  scroll-behavior: [ auto | smooth ];
}

Werte

Die Eigenschaft scroll-behavior akzeptiert zwei Werte, die im Wesentlichen die Funktion des sanften Scrollens ein- und ausschalten.

auto (Standard): Dieser Wert erlaubt den abrupten Sprung zwischen Elementen innerhalb des scrollbaren Bereichs.
smooth: Wie der Name schon sagt, ist dieser Wert der sanfte animierte Übergang zwischen Elementen innerhalb des scrollbaren Bereichs.

Demo

Das folgende Demo funktioniert zum Zeitpunkt der Erstellung nur auf Chrome 61+, Firefox 36+ und Opera 48+.

Siehe den Pen Scrollbarer Bereich mit `scroll-behavior` von CSS-Tricks (@css-tricks) auf CodePen.

Browser-Unterstützung

Diese Browser-Supportdaten stammen von Caniuse, das weitere Details enthält. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.

Desktop

Chrome	Firefox	IE	Edge	Safari
61	36	Nein	79	15.4

Mobil / Tablet

Android Chrome	Android Firefox	Android	iOS Safari
127	127	127	15.4

Weitere Informationen

CSSOM View Module: Der Entwurf der Spezifikation, einschließlich der CSS-Eigenschaft. Der aktuelle Entwurf enthält die Empfehlung, scroll-behavior in eine andere Spezifikation zu verschieben, daher wird es interessant sein zu sehen, wohin das führt.
Mozilla Developer Network: Die MDN-Referenz für die Spezifikation
Microsoft Edge Platform Status: Zeigt derzeit den Status dieser Funktion als „In Prüfung“ an.
Chrome Platform Status: Zeigt derzeit den Status dieser Funktion als „In Entwicklung“ an und enthält als Nebeneffekt auch die Status für andere Plattformen.
Snippet für sanftes Scrollen: Snippets zur Aktivierung von sanftem Scrollen mit Javascript und jQuery
Sanftes Scrollen und Barrierefreiheit: Ein Beitrag von CSS-Tricks über die Auswirkungen von Javascript-aktiviertem sanftem Scrollen