Was ist CSS-Scroll-Snap-Generator?
CSS scroll-snap steuert die Scrollposition eines Containers, sodass er an von Ihnen definierten Ausrichtungspunkten einrastet. Es ermöglicht Karussells, horizontale Galerien und abschnittsweises Scrollen ohne JavaScript. Der Browser übernimmt die Einrast-Physik und sorgt für flüssiges Verhalten auf Trackpad, Mausrad und Touch-Geräten.
Kurze Antwort
Generieren Sie CSS scroll-snap Regeln für Karussells, Galerien und abschnittsbasierte Layouts. Wählen Sie Richtung, Einrast-Typ und Ausrichtung, um zu steuern, wie die Scrollposition an jedem Kind-Element einrastet.
Last updated: 2026-06-11
Einschränkungen
- Der mandatory Einrast-Typ kann schnelles Scrollen durch lange Inhalte verhindern, da die Scrollposition an jedem Kind einrastet.
- Scroll-snap erfordert, dass der Container overflow auf scroll oder auto gesetzt hat. Container mit overflow: hidden aktivieren kein scroll-snap.
- Scroll-snap kann mit prefers-reduced-motion-Benutzereinstellungen in Konflikt geraten. Wickeln Sie das Einrastverhalten in eine @media (prefers-reduced-motion: no-preference)-Abfrage.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
So nutzt du dieses Tool
- Wählen Sie die Scroll-Richtung: horizontal für Karussells und Galerien, vertikal für abschnittsweise Seiten.
- Wählen Sie den Einrast-Typ: mandatory rastet immer am nächsten Punkt ein, proximity nur wenn die Scroll-Position nahe einem Einrast-Punkt ist.
- Wählen Sie die Ausrichtung: start richtet das Kind am Container-Anfang aus, center zentriert es, end richtet es am Ende aus.
- Kopieren Sie das generierte CSS und HTML-Gerüst und ersetzen Sie dann den Platzhalter-Kind-Inhalt durch Ihren eigenen.
Wofür du es nutzen kannst
- Eine horizontale Bildergalerie bauen, die bei Scrollen oder Wischen auf jedes Bild einrastet.
- Eine vollflächige Landingpage erstellen, bei der jeder Abschnitt beim Scrollen einrastet.
- Ein JavaScript-Karussell durch eine leichte CSS-only scroll-snap Komponente ersetzen.