Startseite >CSS >CSS-Referenz – Eigenschaften, Selektoren, Funktionen >scroll-snap-align

scroll-snap-align

scroll-snap-align: none | start | center | end

Gesetzt wird es an den Einträgen innerhalb eines Elements mit scroll-snap-type. Es bestimmt, welcher Punkt des Eintrags nach dem Scrollen am Scroll-Container ausgerichtet wird: start sein Anfang am Anfang, center die Mitte an der Mitte, end das Ende am Ende.

Werte

  • none – der Eintrag rastet nicht ein.
  • start, center, end – Anfang, Mitte, Ende des Eintrags.
  • start center – zwei Werte: der erste für die senkrechte Richtung (block), der zweite für die waagerechte (inline).

Initialwert: none. Vererbt: nein. Gilt für: alle Elemente (wirkt in einem Element mit scroll-snap-type).

Beispiele

Eine Galerie, die nach dem Scrollen das nächste Bild in die Mitte rückt:

<div class="gallery">
  <div class="photo">A</div>
  <div class="photo">B</div>
  <div class="photo">C</div>
</div>

.gallery {
  display: flex;
  gap: 12px;
  max-width: 300px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.photo {
  flex: 0 0 200px;
  height: 100px;
  background: #b3e5fc;
  scroll-snap-align: center;
}
Ergebnis
A
B
C

Nach dem Loslassen rückt das nächste Bild in die Mitte der Galerie, und die benachbarten schauen von beiden Seiten herein.

Worauf Sie achten sollten

  • Ohne scroll-snap-type an einem scrollbaren Elternelement wirkt es nicht.
  • Beim ersten und letzten Eintrag lässt sich center oder end nicht immer erfüllen – das Element lässt sich nicht vor seinen Anfang oder über sein Ende hinaus scrollen.
  • Einen Abstand vom Rand beim Einrasten fügt das scroll-margin des Eintrags hinzu.

Browserunterstützung

Baseline – weithin verfügbar: in allen gängigen Browsern seit Januar 2020, gilt als weithin verfügbar seit Juli 2022. Ab Version: Chrome 69, Firefox 68, Safari 11. Stand: Oktober 2026 (MDN browser-compat-data).

Siehe auch:
scroll-snap-type
scroll-margin
scroll-padding
overflow