Mit der scroll-behaviorEigenschaft in CSS können wir definieren, ob die Bildlaufposition des Browsers zu einer neuen Position springt oder den Übergang reibungslos animiert, wenn ein Benutzer auf einen Link klickt, der auf eine verankerte Position in einem Bildlauffeld abzielt.
html ( scroll-behavior: smooth; )Tiefere Erklärung
Warten Sie, warten Sie, wovon sprechen wir in diesem Bildlauffeld? Es ist ein Element mit Inhalten, die seine Grenzen überschreiten.
Siehe die Pen Scrolling Box von CSS-Tricks (@ css-Tricks) auf CodePen.
Beachten Sie, dass die Box in der obigen Demo eine feste Höhe von 200px? Alle Inhalte, die diese Höhe überschreiten, befinden sich außerhalb der Grenzen des Felds. Wir haben hinzugefügt overflow-y: scroll, um diesen zusätzlichen Inhalt durch vertikales Scrollen zugänglich zu machen. Das ist es, was wir unter einem Bildlauffeld verstehen.
Nehmen wir nun an, wir fügen oben im Feld eine Navigation hinzu, wobei jeder Link auf die drei Inhaltsabschnitte abzielt:
Siehe die Pen Scrolling Box mit Nav nach CSS-Tricks (@ css-Tricks) auf CodePen.
Jeder Link führt den Benutzer direkt zu den verschiedenen Inhaltsabschnitten innerhalb des Bildlauffelds. Standardmäßig ist dieser Übergang zwischen ein abrupter Sprung.
Diese Art von Sprung kann erschütternd sein. Hier scroll-behaviorkommt es ins Spiel und ermöglicht es uns, einen reibungslosen Bildlaufübergang festzulegen. Diese Art von Dingen verwendete früher ausgefallenes Javascript, scroll-behaviorgibt uns aber die Möglichkeit, dies nativ in CSS zu tun, sobald sich die Browserunterstützung verbessert.
Syntax
.module ( scroll-behavior: ( auto | smooth ); )Werte
Die scroll-behaviorEigenschaft akzeptiert zwei Werte, mit denen die Funktion zum reibungslosen Scrollen im Wesentlichen ein- und ausgeschaltet wird.
auto(Standard): Dieser Wert ermöglicht den abrupten Sprung zwischen Elementen innerhalb des Bildlauffelds.smooth: Dieser Wert ist, wie der Name schon sagt, der reibungslose animierte Übergang zwischen Elementen im Bildlauffeld.
Demo
Die folgende Demo funktioniert zum Zeitpunkt des Schreibens nur unter Chrome 61+, Firefox 36+ und Opera 48+.
Siehe die Pen Scrolling Box mit "Scroll-Verhalten" von CSS-Tricks (@ css-Tricks) auf CodePen.
Browser-Unterstützung
Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.
Desktop
| Chrom | Feuerfuchs | IE | Kante | Safari |
|---|---|---|---|---|
| 61 | 36 | Nein | 79 | Nein |
Handy / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | Nein |
Mehr Informationen
- CSSOM-Ansichtsmodul: Der Entwurf der Spezifikation, einschließlich der CSS-Eigenschaft. Der aktuelle Entwurf enthält eine Empfehlung, die
scroll-behaviorauf eine andere Spezifikation zu verschieben. Es wird also interessant sein zu sehen, wo diese landet. - Mozilla Developer Network: Die MDN-Referenz für die Spezifikation
- Microsoft Edge Platform-Status: Zeigt derzeit den Status dieser Funktion als unter Berücksichtigung an
- Chrome-Plattformstatus: Zeigt derzeit den Status dieser Funktion als In Entwicklung an und enthält nebenbei den Status für andere Plattformen
- Smooth Scrolling Snippet: Snippets, um ein reibungsloses Scrollen mit Javascript und jQuery zu ermöglichen
- Reibungsloses Scrollen und Barrierefreiheit: Ein Beitrag zu CSS-Tricks zu den Auswirkungen des Javascript-fähigen reibungslosen Scrollens