In CSS lassen sich sehr einfach Scroll Stories umsetzen, die sich an die Bildschirmhöhe oder Breite anpassen und beim Scrollen automatisch zum nächsten Abschnitt übergehen.

Damit das ganze funktioniert, benötigt man einen Container, der die verschiedenen Abschnitte beinhaltet. Theoretisch kann man auch den body- oder html-Tag nutzen, ist vermutlich allerdings weniger elegant und semantisch korrekt.

Für die einzelnen Abschnitte definiert man im CSS, dass sie magnetisch immer mit der oberen Kante des Containers ausgerichtet sein sollen, indem man ein scroll-snap-align mit dem Wert start setzt.

Dem Container, der alle Abschnitte oder Slides enthält gibt man eine festgesetzte Höhe z.B. 100vh und anschließend setzt man overflow-y auf den Wert scroll und scroll-snap-type auf den Wert y mandatory.

.slider-row {
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  height: 100vh;
}

section.slide{
  scroll-snap-align: start;
  height: 100vh;
}Code-Sprache: CSS (css)

Wenn man das Ganze mit einer einfachen CSS Grid erweitert, kann man auf den verschiedenen Abschnitten und Folien bequem Elemente positionieren. Für mobile Endgeräte kann man einfach das Attribut grid-template-rows bzw. grid-template-columns auf einen kleineren Wert setzen und ggf. Elemente mit einer Media-Query verschieben.

Das Ergebnis sieht man im CodePen weiter oben auf dieser Seite.