Horizontal und vertikal scrollende Bildergalerie mit CSS Scroll Snap

08.04.2022

Horizontal und vertikal scrollende Bildergalerie mit CSS Scroll-Snap

Horizontales Scrollen auf mobilen Geräten und vertikales Scrollen auf Desktop-Computern

Die CSS-Eigenschaft Scroll Snap ermöglicht es, einen Scrollvorgang an einem festgelegten Punkt enden zu lassen. So können zum Beispiel Bilder oder hervorgehobene Texte genau in der Mitte eines Bildschirmausschnitts einrasten, wenn der Scrollvorgang abgeschlossen wird.

Screenshot of an image gallery with CSS Scroll Snap — Scroll Snap in Action: Example Image Gallery

Dabei werden ein Bild oder mehrere Bilder oder andere Inhaltselemente in einen „Scrollcontainer“ gepackt, innerhalb dessen dann die Elemente nach dem Scrollen an bestimmten Positionen einrasten. Ausführliche Erläuterungen zu CSS Scroll Snap gibt es hier.

Mit CSS Scroll Snap kann man also das Wesentliche stets in den Mittelpunkt des Screens stellen. Ganz ohne JavaScript wird beim horizontalen oder vertikalen Scrollen immer soweit gescrollt, dass – wie im Beispiel der Bildergalerie auf meiner Demo-Seite – immer das nächste Bild oder die nächste Reihe von Bildern in den Mittelpunkt oder an den Anfang oder das Ende des umgebenden Containers rückt, genauer gesagt „einrastet“.

Auf diese Weise lassen sich auch leichtgewichtige Slider gestalten, da hier kein JavsScript benötigt wird. Hier gibt es ein schönes Beispiel für solch einen Slider.

Beispiel Bildergalerie

Um das Prinzip von „scroll-snap“ anschaulich zu machen, habe ich eine Bildergalerie angelegt und diese mit CSS Flexbox gestaltet. Hier geht es zur Demo-Seite mit der Bildergalerie.

Und hier ist der HTML-Code für die Bilder-Galerie mit Scroll Snap:

HTML-Code
<div class="gallery-scroll">
  <figure class="gallery-item">
    <img class="gallery-img" src="https://picsum.photos/230/300?random=1" alt="Symbolbild" title="Symbolbild">
    <figcaption>Image Title</figcaption>
  </figure>
  <!-- ... Insgesamt 20 Bilder ... -->
  <figure class="gallery-item">
    <img class="gallery-img" src="https://picsum.photos/230/300?random=20" alt="Symbolbild" title="Symbolbild">
    <figcaption>Image Title</figcaption>
  </figure>
</div><!-- end gallery-scroll -->

Erläuterungen zum HTML-Code

div class="gallery-scroll": Der Container für die Bildergalerie mit der Klasse gallery-scroll. Hier werden die Richtung (y = vertikal oder x = horizontal) und das Verhalten (mandatory [verpflichtend,genau], proximity [annähernd] oder beides) des Scroll-Ereignisses festgelegt.
figure class="gallery-item": Das Element figure mit der Klasse gallery-item beinhaltet je ein Bild plus eine Bildbeschriftung. Insgesamt habe ich zwanzig Items angelegt. Hier wird festgelegt, an welchem Punkt der Scroll-Vorgang einrasten soll: start, center oder end.
img class="gallery-img": Die Bilder der Bildergalerie mit der Klasse gallery-img.
figcaption: Die Bildbeschriftung.

Die Gestaltung der Bildergalerie

Horizontal und vertikal scrollbare Bildergalerie

Auf Bildschirmen mobiler Geräte werden alle Bilder horizontal angeordnet, sodass man die Galerie horizontal scrollen oder auf mobilen Geräten „wischen“ („swipe“) kann.

Bei Bildschirmgrößen, die für Desktop-Computer typisch sind, werden die Bilder vertikal angeordnet und stets so viele Bilder nebeneinander angezeigt, wie es die Bildschirmbreite hergibt.

Horizontales Scrollen auf mobilen Geräten

Zuerst kommt nun der CSS-Code für die horizontale, mobile Version:

CSS-Code
.gallery-scroll {
  display: flex;
  flex-wrap: nowrap;
  margin: 0;
  padding: 0;
  background-color: #f0f0f0;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overflow-x: scroll;
}

.gallery-item {
  padding: .5rem;
  font-size: 1.2rem;
  text-align: center;
  background-color: #333;
  color: #d9d9d9;
  scroll-snap-align: center;
}

Erläuterungen zum CSS-Code

.gallery-scroll

display: flex: Macht den Container zur flex-box.
flex-wrap: nowrap: Bildergalerie wird nicht umgebrochen, Bilder werden in einer Zeile dargestellt.
scroll-snap-type: x mandatory: Scroll-Richtung: horizontal; Scroll-Verhalten: verpflichtend.
scroll-behavior: smooth: Bewirkt, dass der Scroll-Vorgang weich oder sanft wird; kann auch generell im <html>-Element festgelegt werden.
overflow-x: scroll: Eine horizontale Scroll-Leiste wird angezeigt.

.gallery-item

scroll-snap-align: center: Scroll-Vorgang rastet in der Mitte des Elements ein.

Vertikales Scrollen auf größeren Bildschirmen

Beim vertikalen Scrollen lege ich die Höhe des Scroll-Containers mit 450 Pixeln ein wenig höher an, als die Höhe der Bilder (300 Pixel), damit immer sichtbar ist, dass weitere Bilder folgen.

Das vertikale Scrollen wird mit folgendem Code, den ich in ein Media Query stecke, erreicht:

@media screen and (min-width: 800px) {
  .gallery-scroll {
    flex-wrap: wrap;
    padding: 1rem 0;
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    height: 450px;
  }

  .gallery-item {
    scroll-snap-align: start;
  }
}

Erläuterungen zum CSS-Code

.gallery-scroll @media screen and (min-width: 800px)

flex-wrap: wrap: Bildergalerie wird umgebrochen, Bilder werden untereinander dargestellt und zugleich so viele Bilder nebeneinander angezeigt, wie es die Bildschirmbreite zulässt.
scroll-snap-type: y mandatory: Scroll-Richtung: vertikal; Scroll-Verhalten: verpflichtend.
overflow-y: scroll: Eine vertikale Scroll-Leiste wird angezeigt.

.gallery-item

scroll-snap-align: start: Scroll-Vorgang rastet am oberen Rand des Elements ein.

Hier geht es zur Demo-Seite mit der Bildergalerie.

Und hier geht es zum Download des komletten Codes der Demo-Seite.

In dem ZIP-Ordner sind die HTML- sowie die CSS-Datei für die Bilder-Galerie mit CSS-Scroll Snap enthalten.