Scroll-Snap

Scroll-Snap ist ein CSS-Feature, das präzise Scroll-Positionen in scrollbaren Containern erzwingt, wodurch ein „einrastender“ Effekt entsteht. Diese Technologie ist besonders nützlich für die Erstellung von slider-ähnlichen Interfaces, Bildergalerien oder mehrseitigen Layouts, bei denen der Inhalt in logische Abschnitte unterteilt ist.

Kernkonzepte von Scroll-Snap

Scroll-Snap besteht aus zwei Hauptkomponenten:
• Scroll-Snap Container: Das scrollbare Elternelement
• Scroll-Snap Items: Die Kinder-Elemente, die als Snap-Positionen dienen

Wichtige CSS-Eigenschaften

• scroll-snap-type: Definiert das Snap-Verhalten des Containers
• scroll-snap-align: Legt die Ausrichtung der Snap-Positionen fest
• scroll-snap-stop: Steuert, ob Scroll-Ereignisse an Zwischenpunkten stoppen müssen
• scroll-padding/scroll-margin: Fügt Abstand zu den Snap-Positionen hinzu

Detaillierte Erklärung mit Beispielen

Basis-Setup

<div class="snap-container">
  <div class="snap-item">Slide 1</div>
  <div class="snap-item">Slide 2</div>
  <div class="snap-item">Slide 3</div>
</div>

<div class="snap-container">
  <div class="snap-item">Slide 1</div>
  <div class="snap-item">Slide 2</div>
  <div class="snap-item">Slide 3</div>
</div>

.snap-container {
  width: 100%;
  height: 300px;
  overflow-x: auto; /* oder overflow-y, je nach Ausrichtung */
  scroll-snap-type: x mandatory;
  /* horizontales Scrollen mit obligatorischem Snap */
  display: flex;
  scrollbar-width: none; /* für Firefox */
}

.snap-container::-webkit-scrollbar {
  display: none; /* für Chrome/Safari */
}

.snap-item {
  min-width: 100%;
  height: 100%;
  scroll-snap-align: start;
}

.snap-container {
  width: 100%;
  height: 300px;
  overflow-x: auto; /* oder overflow-y, je nach Ausrichtung */
  scroll-snap-type: x mandatory;
  /* horizontales Scrollen mit obligatorischem Snap */
  display: flex;
  scrollbar-width: none; /* für Firefox */
}

.snap-container::-webkit-scrollbar {
  display: none; /* für Chrome/Safari */
}

.snap-item {
  min-width: 100%;
  height: 100%;
  scroll-snap-align: start;
}

scroll-snap-type Werte

Axis:
• x: Horizontales Scrollen
• y: Vertikales Scrollen
• block: Block-Achse (abhängig vom Schreibmodus)
• inline: Inline-Achse (abhängig vom Schreibmodus)

Strictness:
• mandatory: Browser muss immer zu einem Snap-Point springen
• proximity: Browser springt nur, wenn in der Nähe eines Snap-Points

Beispiel:

/* Vertikales Scrollen mit optionalem Snap */
scroll-snap-type: y proximity;

/* Horizontales Scrollen mit obligatorischem Snap */
scroll-snap-type: x mandatory;

/* Vertikales Scrollen mit optionalem Snap */
scroll-snap-type: y proximity;

/* Horizontales Scrollen mit obligatorischem Snap */
scroll-snap-type: x mandatory;

scroll-snap-align Werte

• start: Rastet am Anfang des Elements ein
• end: Rastet am Ende des Elements ein
• center: Rastet in der Mitte des Elements ein

Beispiel:

/* Unterschiedliche Ausrichtungen für verschiedene Items */
.snap-item:nth-child(1) { scroll-snap-align: start; }
.snap-item:nth-child(2) { scroll-snap-align: center; }
.snap-item:nth-child(3) { scroll-snap-align: end; }

/* Unterschiedliche Ausrichtungen für verschiedene Items */
.snap-item:nth-child(1) { scroll-snap-align: start; }
.snap-item:nth-child(2) { scroll-snap-align: center; }
.snap-item:nth-child(3) { scroll-snap-align: end; }

scroll-snap-stop

• normal: Standardverhalten (kann über Snap-Points scrollen)
• always: Muss bei jedem Snap-Point anhalten

Beispiel:

.snap-item {
  scroll-snap-stop: always;
}

.snap-item {
  scroll-snap-stop: always;
}

Praxisbeispiele

Horizontale Bildergalerie

<div class="gallery">
  <img src="bild1.jpg" alt="">
  <img src="bild2.jpg" alt="">
  <img src="bild3.jpg" alt="">
</div>

<div class="gallery">
  <img src="bild1.jpg" alt="">
  <img src="bild2.jpg" alt="">
  <img src="bild3.jpg" alt="">
</div>

.gallery {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 1rem;
  padding: 1rem;
}

.gallery img {
  scroll-snap-align: center;
  min-width: 80vw;
  max-height: 60vh;
  object-fit: cover;
  border-radius: 8px;
}

.gallery {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 1rem;
  padding: 1rem;
}

.gallery img {
  scroll-snap-align: center;
  min-width: 80vw;
  max-height: 60vh;
  object-fit: cover;
  border-radius: 8px;
}

Vertikaler Artikel mit Abschnitten

<article class="scrolling-article">
  <section>...</section>
  <section>...</section>
  <section>...</section>
</article>

<article class="scrolling-article">
  <section>...</section>
  <section>...</section>
  <section>...</section>
</article>

.scrolling-article {
  height: 100vh;
  overflow-y: auto;
  scroll-snap-type: y proximity;
  scroll-padding: 50px; /* Abstand zum Viewport-Rand */
}

.scrolling-article section {
  min-height: 100vh;
  scroll-snap-align: start;
  padding: 2rem;
}

.scrolling-article {
  height: 100vh;
  overflow-y: auto;
  scroll-snap-type: y proximity;
  scroll-padding: 50px; /* Abstand zum Viewport-Rand */
}

.scrolling-article section {
  min-height: 100vh;
  scroll-snap-align: start;
  padding: 2rem;
}

2D-Snap für Rasterlayouts

<div class="grid-snap">
  <div class="cell">1</div>
  <div class="cell">2</div>
  <!-- ... weitere Zellen -->
</div>

<div class="grid-snap">
  <div class="cell">1</div>
  <div class="cell">2</div>
  <!-- ... weitere Zellen -->
</div>

.grid-snap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  width: 300px;
  height: 300px;
  overflow: auto;
  scroll-snap-type: both mandatory;
}

.cell {
  scroll-snap-align: start;
  min-width: 100px;
  min-height: 100px;
}

.grid-snap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  width: 300px;
  height: 300px;
  overflow: auto;
  scroll-snap-type: both mandatory;
}

.cell {
  scroll-snap-align: start;
  min-width: 100px;
  min-height: 100px;
}

Browser-Kompatibilität und Fallbacks

Scroll-Snap wird von allen modernen Browsern unterstützt (Chrome 69+, Firefox 68+, Safari 11+, Edge 79+).

Best Practices

• Performance: Scroll-Snap ist GPU-beschleunigt und hat normalerweise geringen Performance-Overhead
• Zugänglichkeit: Stellen Sie sicher, dass Tastaturnavigation (Tab/Shift+Tab) weiterhin funktioniert
• Flexibilität: Kombinieren Sie mit Media Queries für responsive Designs
• Fallbacks: Implementieren Sie progressive Verbesserung für nicht unterstützende Browser

Scroll-Snap bietet eine native, performante Lösung für viele UI-Muster, die früher JavaScript erforderten, und verbessert damit die Benutzererfahrung durch präzise Scroll-Positionierung.