kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

CSS Scroll Snap

Mit Hilfe der Scroll Snap-Technik von CSS könnt ihr steuern, dass der Browser an bestimmten Stellen im Layout einrastet, wenn über diese Punkte hinweg gescrolled werden soll. CSS Scroll Snap kann somit die Usability und die User Experience erheblich verbessern – z. B. beim Gestalten von Bildergalerien oder OnePagern mit verschiedenen Sektionen. Viele Scrolling-Effekte, für die früher JavaScript eingesetzt wurde, können dank Scroll Snap heute mit CSS gelöst werden.

Workshops und Seminare von kulturbanause

Visual Prototyping, Web Animationen, Responsive Design, CSS Grid & Flexbox, Sketch, Adobe XD …

Jetzt Frühbucher-Rabatte sichern!

Grundkonzept CSS Scroll Snap

Die Scroll Snap-Technik von CSS arbeitet mit einem Container-Element und darin enthaltenen Kind-Elementen.

Das Container-Element definiert in welchem Bereich das Scrolling-Verhalten stattfinden soll, ob horizontal oder vertikal gescrolled wird und wie streng der Browser sich verhalten soll was das »Einrast-Verhalten« angeht. Dazu existieren folgende Eigenschaften:

  • scroll-snap-type
  • scroll-snap-stop (aktuell nicht empfohlen, da ggf. in Zukunft nicht mehr Teil der Spezifikation)
  • scroll-padding sowie zahlreiche ausführliche Schreibweisen (Longhand Properties)

Die CSS-Eigenschaft scroll-snap-type ist hierbei zentral. Alleine mit dieser Eigenschaft können viele Lösungen erreicht werden.

Die Kind-Elemente sind die Elemente die gescrolled werden. Sie erhalten u.a. Eigenschaften um zu steuern wo beim Scrollen gestoppt werden soll. Die verfügbaren Eigenschaften sind:

  • scroll-snap-align
  • scroll-margin sowie zahlreiche ausführliche Schreibweisen (Longhand Properties)

Auch hier ist die Eigenschaft scroll-snap-align von zentraler Bedeutung.

Beispiel: Vertikal Scrollen

Schauen wir uns ein einfaches Beispiel an um zu verstehen, wie Scroll Snap funktioniert.

Aufnahme des Beispiels: Beim Scrollen rastet die Sektion immer an der oberen Kante ein

Der folgende Code erzeugt einen OnePager mit abwechseln farbigen Sektionen, die immer die gesamte Größe des Browserfensters einnehmen.

<body>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
</body>

Der <body> stellt das Container-Element dar. Mit scroll-snap-type: y mandatory; definieren wir, dass vertikal gescrolled wird und das die »Snap Points« verpflichtend eingehalten werden müssen.

Die <section>-Elemente werden gescrolled. Mit scroll-snap-align: start; bestimmen wir, dass die Oberkante jeder <section> die Stelle markiert, an der beim Scrollen gestoppt werden soll. In Kombination mit dem mandatory-Wert von scroll-snap-type führt das dazu, dass der Browser immer automatisch zur nächstgelegenen Sektion scrollt, wenn der Scroll-Vorgang beendet wird.

body {
  margin: 0;
  scroll-snap-type: y mandatory; /* Vertikal Scrollen und Snap Points streng einhalten */
}

section {
  height: 100vh;
  scroll-snap-align: start; /* An der Oberkante jeder Sektion soll gestoppt werden */
}

section:nth-of-type(even) {
  background: #8cb11c;
}

section:nth-of-type(odd) {
  background: #147c85;
}

Beispiel anschauen

Wenn es möglich sein soll den Scrollvorgang auch auf halben Sektionen abzubrechen ohne, dass der Browser automatisch zum nächsten bzw. letzten Abschnitt navigiert, dann kann anstelle des mandatory-Werts auch proximity verwendet werden. In diesem Fall scrolled der Browser nur automatisch, wenn man sich in der Nähe der Oberkante befindet. Was »in der Nähe« konkret bedeutet ist den Browsern überlassen.

Beispiel anschauen

Beispiel: Horizontal Scrollen

Das folgende Beispiel zeigt eine horizontale Bildergalerie. Die Breite des Containers ist so gewählt, dass immer nur ein Bild vollständig sichtbar ist. Zu Beginn ist dies das 1. Bild ganz links. Dank scroll-snap-align: center; richten sich die Bilder immer zentriert aus, sobald gescrolled wird.

Aufnahme des Beispiels: Beim Scrollen rastet das Bild immer zentriert ein
<div class="gallery">
  <img src="…">
  <img src="…">
  …
</div>
.gallery {
  width: 650px;
  display: flex;
  margin: 2em auto;
  padding: 0 1em;
  background: #04191b;
  overflow-y: hidden;
  scroll-snap-type: x mandatory; /* Horizontal scrollen und Snap Points streng einhalten */
}

img {
  margin: 2em 1em;
  scroll-snap-align: center; /* Die Mitte eines Bildes ist der Snap Point */
}

Beispiel anschauen

Beispiel: Scroll Padding

Die für den Scroll-Container gedachte Eigenschaft scroll-snap-padding kommt zum Einsatz, wenn ein Innenabstand zum Snap Point gesetzt werden soll.

Das folgende Beispiel erweitert den oben bereits beschriebenen OnePager um einen fixierten Header mit 60 Pixel Höhe. Da dieser Header immer im Vordergrund liegt, muss der scroll-snap-align-Wert der einzelnen Sektionen von oben um 60 Pixel verschoben werden.

Aufnahme des Beispiels: Die weiße Linie an der Oberkante jeder Sektion markiert den verschobenen Snap Point
<body>
  <header></header>
  <section></section>
  <section></section>
  …
</body>
body {
  padding-top: 60px;
  scroll-snap-type: y mandatory;
  scroll-padding-top: 60px;
}

header {
  height: 60px;
  width: 100%;
  background: #3a444a;
  position: fixed;
  top: 0;
}

section {
  height: 100vh;
  border-top: 2px solid white;
  scroll-snap-align: start;
}

…

Beispiel anschauen

Beispiel: Scroll Margin

Das Gegenstück zur scroll-padding-Eigenschaft des Containers stellt die scroll-margin-Eigenschaft der Kind-Elemente dar.

Das folgende Beispiel arbeitet mit Sinnabschnitten die einen großen Abstand zueinander aufweisen und immer an der Oberkante einrasten sollen. Um den Abstand nach oben immer einzuhalten, wurde scroll-margin genutzt.

Aufnahme des Beispiels: Beim Scrollen wird 50px oberhalb der Oberkante eines Elements gestoppt
body {
  scroll-snap-type: y mandatory;
}

.item {
  background: #a6bcc7;
  height: 50vh;
  width: 50vw;
  margin: 50px auto;
  scroll-snap-align: start;
  scroll-margin-top: 50px;
}

Beispiel anschauen

CSS Scroll Snap-Eigenschaften im Detail

Die oben gezeigten Beispiele haben hoffentlich einen guten Eindruck über die Möglichkeiten von Scroll Snap vermittelt. Eine detaillierte Übersicht über alle verfügbaren Eigenschaften findet ihr u.a. bei Mozilla.

Browser-Support

Der Browser-Support sieht insgesamt sehr gut aus – alle aktuellen Browser unterstützen die Technik. Allerdings gibt es noch eine alte Syntax, die mittlerweile nicht mehr korrekt ist und um die ihr einen Bogen machen solltet. Den detaillierten Browser-Support findet ihr auf caniuse.com.

Selbst wenn ein Browser Scroll Snap nicht unterstützen sollte, stellt dies kein großes Problem dar, da die Technik dank Progressive Enhancement einfach eingesetzt werden kann, wenn der entsprechende Browser-Support vorhanden ist.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

3 Kommentare

  1. tk

    Verfasst am 21. März 2019 um 11:38 Uhr.

    Hi,
    funktioniert leider alles nicht im Firefox 66.0
    ???

    In Safari und Chrome klappt es.

    Danke, Gruß!

    • Jonas Hellwig

      Verfasst am 1. April 2019 um 13:00 Uhr.

      Firefox 66 unterstützt die Funktion noch nicht – nur unter der Flag.

  2. Benny

    Verfasst am 9. April 2019 um 13:43 Uhr.

    Sehr kool. Genau das was ich gesucht hab. Danke!

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.