CSS scroll-snap – Einrasten beim Scrollen

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.

Hinweis: Benutzer mit einem iPhone im Porträt-Modus erkennen u.U. nicht, dass der Bereich scrollbar ist, denn das iPhone zeigt keine Scrollbalken.

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-Elemente 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-align: Anfang, Ende, Mitte

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.

.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>

.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;
}