Vollbild-Sektionen
Section für Section scrollen - komplett nativ über CSS Scroll Snap, kein JS.
↓ weiter scrollen ↓
Dann horizontal ...
Innerhalb dieser Sektion liegt ein eigener horizontaler Scroll-Snap-Track (.ncss-scroll-snap-x) - erst zur Seite, dann geht es vertikal weiter.
... und weiter
Diese Sektion nutzt zusätzlich .ncss-snap-section--scrollable, falls der Inhalt mal nicht auf einen Bildschirm passt - intern scrollbar, ohne das äußere Einrasten zu stören.
Etwas mehr Text, damit hier wirklich etwas zu scrollen ist: scroll-snap-stop: always verhindert, dass ein schneller Scroll/Trackpad-Flick diese Sektion einfach überspringt.
Ein Absatz mehr, rein zur Demonstration der internen Scrollbarkeit dieser Sektion.
Letzte Sektion
Markup: .ncss-snap-sections außen, .ncss-snap-section je Bildschirm - siehe helpers/scroll.css. Für Karten, die sich beim Scrollen aufeinander stapeln statt Sektion für Sektion einzurasten, siehe stattdessen Stacked Cards.
<div class="ncss-snap-sections">
<section class="ncss-snap-section">Sektion 1</section>
<section class="ncss-snap-section">Sektion 2</section>
</div>