Portfolio-Präsentationen mit Scroll-Snap

Showcase-Projekte nebeneinander anordnen. Besucher navigieren spielend leicht durch dein Portfolio mit smoothem Scroll-Verhalten und automatischen Ausrichtungspunkten.

10 min Lesezeit Intermediate März 2026

Warum horizontales Scrollen für Portfolios funktioniert

Scroll-Snap ist eine CSS-Eigenschaft, die automatisch Scroll-Container an definierten Punkten ausrichtet. Für Portfolios ist das ein Game-Changer. Deine Besucher sehen jedes Projekt in voller Größe — ohne dass sie selbst scrollen müssen.

Die Technologie ist nicht neu, aber sie wird oft falsch implementiert. Viele Designer verstehen nicht, wie man Scroll-Snap mit anderen Design-Elementen kombiniert. Hier zeigen wir dir, wie’s richtig geht.

Portfolio-Website mit mehreren Projekt-Karten in horizontaler Anordnung nebeneinander

Die Basis: scroll-snap-type und scroll-snap-align

Scroll-Snap funktioniert über zwei CSS-Eigenschaften. Die erste ist scroll-snap-type — die setzt du auf dem Container. Die zweite ist scroll-snap-align — die setzt du auf den einzelnen Elementen.

Das klingt kompliziert, ist aber einfach. Der Container sagt: “Hier wird gesnapped.” Die Kinder sagen: “Ich bin ein Snap-Punkt.” Wenn ein Besucher aufhört zu scrollen, springt der Container zum nächsten Kind und zentriert es. Fertig.

Wichtig

scroll-snap-type braucht eine Richtung: x für horizontal, y für vertikal. Du brauchst auch overflow: auto oder overflow-x: scroll auf dem Container.

CSS-Code-Beispiel für scroll-snap-type auf Container-Element

Desktop-Monitor zeigt Portfolio-Website mit horizontal angeordneten Projekt-Karten und Scroll-Animation

Implementierung: Das komplette Setup

Hier ist das Grundgerüst. Der Container kriegt scroll-snap-type: x mandatory . Das Wort “mandatory” bedeutet: Der Browser muss snappen — keine Verhandlung. Die einzelnen Projekte kriegen scroll-snap-align: center .

Warum center? Weil es am besten aussieht. Das Projekt landet in der Mitte des Viewports. Dein Besucher sieht sofort, welches Projekt gerade aktiv ist.

scroll-behavior: smooth macht’s noch geschmeidiger
Setze eine feste Breite auf die Projekte — z.B. width: 100vw oder width: 90%
Padding auf den Container sorgt für Breathing Room

Hinweis

Browser-Support: Scroll-Snap funktioniert in modernen Browsern (Chrome 69+, Firefox 68+, Safari 15+, Edge 79+). Ältere Browser ignorieren die Eigenschaft einfach — dein Portfolio scrollt dann normal. Das ist nicht schlimm. Aber teste auf mehreren Geräten, bevor du live gehst.

Richtungsindikatoren: Besucher führen, nicht verwirren

Horizontales Scrollen ist nicht intuitiv. Viele Besucher verstehen nicht, dass sie nach links oder rechts scrollen können. Deswegen brauchst du visuelle Hinweise — Pfeile, Punkte, Text. Alles möglich.

Die beste Lösung? Eine Kombination. Ein dezenter Text oben (“Scroll nach rechts “) + Pfeile am Rand (left/right) + kleine Punkte unten, die zeigen, wo du gerade bist. Das ist nicht zu viel, sondern ausreichend Guidance.

Praktischer Tipp

Nutze Scroll-Events und JavaScript, um die aktuelle Position zu tracken. Dann kannst du Pfeile hide/show, je nachdem, ob der Besucher am Anfang oder Ende ist. Macht die Navigation viel intelligenter.

Mobile-Smartphone zeigt Portfolio mit Richtungspfeilen und visuellen Scroll-Indikatoren am unteren Rand

Tablet-Gerät zeigt responsive Portfolio-Layout mit Scroll-Snap auf mittlerer Bildschirmgröße

Responsive Design: Desktop, Tablet, Mobile

Auf dem Desktop? Perfekt. Drei Projekte nebeneinander, Scroll-Snap aktiviert, alles läuft. Auf Tablet? Schwieriger. Sollen zwei Projekte nebeneinander sein, oder doch nur eins? Die Antwort: Es kommt auf dein Portfolio an.

Auf Mobiltelefonen ist horizontales Scrollen ohnehin natürlich. Alle Apps machen’s. Aber auf sehr schmalen Bildschirmen sollte dein Portfolio vielleicht zurück zu vertikalem Scrollen wechseln. Das ist keine Schwäche — das ist User Experience Design.

Nutze Media Queries. Bei unter 768px könntest du scroll-snap-type: none setzen und deine Projekte vertikal stapeln. Deine Besucher werden es dir danken.

Fazit: Einfach, kraftvoll, unterschätzt

Scroll-Snap ist nicht kompliziert. Drei CSS-Zeilen und dein Portfolio scrollt horizontal wie ein Profi. Der echte Aufwand liegt in den Details — Richtungsindikatoren, responsive Breakpoints, Performance. Aber die lohnen sich.

Viele Designer kennen Scroll-Snap nicht mal. Das ist dein Vorteil. Wenn du es richtig machst, wird dein Portfolio sich von der Masse abheben. Und deine Besucher werden die flüssige Navigation lieben.

Fang an. Experimentiere. Scroll-Snap ist forgiving — wenn’s nicht funktioniert, scrollt der Browser eben normal. Risiko? Null.