CSS scroll-snap – Einrasten beim Scrollen

CSS Scroll Snap liefert elegantes und präzises Scrollen mit exakten Andockpunkten und bleibt dabei ein subtiler Effekt. Nur ein Stupser mit dem Finger oder ein Wischen mit der Maus – wo sonst eine Javascript-Library rechnen musste.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Scrollen mit Einrasten

scroll-snap ist exaktes Scrollen zu einer bestimmten Position mit nur einem Stubser des Fingers oder einem kurzen Mauswisch. Die klassischen Slider und Galerien mit Bullets sind weniger benutzerfreundlich, denn auf dem Handy müssen sie mit einem Tippen des Fingers in Gang gesetzt werden, während das Handy mit der anderen Hand gehalten wird. Die Option, eine Liste von Elementen innerhalb der Webseite nach rechts / links zu Scrollen spart Platz, erhält eine bessere Übersicht, ist intuitiver als das Klicken durch Karusells oder das Auf- und Zuklappen verschachtelter Menüs.

Schnapppunkte markieren die Grenzen und der Browser bestimmt je nach Layout und Sichtbarkeit die passende Grenze des Blocks oder Containers, um mit einer weichen Animation in die Landezone zu scrollen.

Eine Zutat für einen Scrollblock ist auf jeden Fall die CSS-Eigenschaft overflow mit einem Wert für die Richtung. Eine genauso wichtige Voraussetzung: Die Elemente des Scrollblocks sitzen nebeneinander.

Wenn die Elemente des Blocks nicht sowieso schon inline-Wlemente sind, setzt display: flex die Blöcke in eine Reihe.

<div id="gallery">
	<img src="blueten.jpg" width="400" height="300" alt="plant-blueten">
	<img src="distel.jpg" width="400" height="300" alt="plant-distel">
	…
</div>

Der umfassende Block (gallery) bekommt die CSS-Eigenschaft scroll-snap-type. scroll-snap-align verleiht den Elementen innerhalb des Blocks die Rasterpunkte.

#gallery {
	scroll-snap-type: x mandatory;
	overflow-x: scroll;
	display: flex;
	gap: 18px;
	cursor: pointer;
	max-width: 600px;
	margin: auto;
}

#gallery img {
	scroll-snap-align: center;
}
scroll-snap-type
none Kein Einschnappen oder einrasten – Vorgabe
x Einrasten auf der x-Achse
y Einrasten auf der y-Achse
block Einrasten auf block direction
inline Einrasten inline direction
both Einrasten sowohl auf der x- als auch af der y-Achse
mandatory Am Ende einer Scroll-Aktion bewegt sich das Element automatisch zum nächsten Einrastpunkt.
proximity Ähnlich wie mandatory, aber nicht so streng. Das Ende einer Scroll-Aktion bewegt das Element automatisch zum nächsten Einrastpunkt, aber zwischen den Andockstellen liegt ein Bereich ohne Einrastpunkt.
initial Setzt die Eigenschaft auf die vorgegebenen Werte.
inherit Erbt die Eigenschaft von seinem Eltern-Element.

scroll-snap-align: Anfang, Ende, Mitte

An welcher Stelle des Elements soll der Andockpunkt liegen?
scroll-snap-align
noneVoreinstellung oder default:
startAndockstellen am Anfang des Elements auf der x- und der y-Achse
endAndockstellen am Ende des Elements auf der x- und der y-Achse
centerAndockstellen in der Mitte des Elements auf der x- und der y-Achse

Einrasten

Das exakte Einrasten an Anfang, Ende oder in der Mitte muss zwingend (mandatory) sein. scroll-snap-type: proximity ist die Vorgabe und überläßt dem Browser die Position des Einrasters.

scroll-snap-stop: always

Wenn der Benutzer schnell durch die Elemente eines scroll-snap-Blocks scrollt, kann es passieren, dass er dabei ein wichtiges Element überspringt.

Die Einstellung scroll-snap-stop: always zwingt den Browser, bei diesem Element immer am Andockpunkt des Elements anzuhalten. Noch einmal dieselbe Galerie wie am Anfang dieses Beitrags:

Das schmale Bild gegen Ende kann schnell übersehen sehen, also zwingt CSS scroll-snap-stop: always den Browser, dieses Bild auch bei schnellem Scrollen anzuzeigen.

#gallery img.forcestop {
	scroll-snap-stop: always;
}

Vertical snap-scroll

Auch ein senkrecht arbeitender Slider kann die Übersicht über die Inhalte verbessern, obwohl auf den kleinen Monitoren der mobilen Geräte ein horizontaler Scrollblock einfacher bedient werden kann.

1

2

3

4
.vertical {
	height: 30vh;
	max-width: calc(var(--max-width) - 2em); /** Rand rechts und links! **/
	scroll-snap-points-y: repeat(300px);
	scroll-snap-type: y mandatory;
	scroll-snap-type: mandatory;
	overflow: auto;
}

vertical-section {
	display: flex;
	justify-content: center;
	align-items: center;
	scroll-snap-align: start;
}

In beiden Fällen – ob nur vertikal oder horizontal gescrollt werden kann – muss Mac OS Benutzern klar gemacht werden, dass die Region scrollbar ist, denn Mac OS zeigt Scrollleisten erst, wenn eine scrollbare Region durch Anstoßen in Bewegung kommt. Auf jeden Fall auch rechts bzw. links Platz lassen, damit die Seite »normal« gescrollt werden kann.

scroll-snap vertikal und horizontal

Scroll und Snap funktioniert auch in beide Richtungen. Der Trick ist ein zusätzliches <br>-Element zwischen den Reihen.

<div class="tictac">
	…
	<div><img src="hibiskus.webp" width="400" height="400" alt="…"></div>
	<div><img src="kristall.webp" width="400" height="400" alt="…"></div>
	<br>
	<div><img  src="ginko.webp" width="400" height="400" alt="…"></div>
	…
</div>
free-bag
free-bohonapkin
free-hibiscuspetal
free-crystal1

free-goldginko
free-hibiscus
free-hibiscuspetal
free-lemon

free-melon1
free-melon2
free-orange
free-plate

free-tangerine
free-wholelemon
free.crystal
free-bohonapkin1
.tictac {
	scroll-snap-type: both mandatory;
	width: 88%;
	max-width: 400px;
	white-space: nowrap;
	aspect-ratio: 1/1;
	overflow-x: scroll;
	overflow-y: scroll;
}

.tictac div { 
	display: inline-block;
	height: 80%;
	aspect-ratio: 1/1;
	margin: 5px;
	scroll-snap-align: center;
}