Grundkonzepte des Scroll-Snap
Die Eigenschaften im Modul CSS scroll snap ermöglichen es Ihnen, zu definieren, wie das Scrollen beim Durchlaufen eines Dokuments an bestimmten Punkten einrasten kann.
Das scroll snap-Feature erlaubt es Ihnen, die Einrastpositionen zu definieren, zu denen der Scrollport eines scroll container nach Abschluss eines Scrollvorgangs gelangen kann.
Wichtige Eigenschaften für CSS scroll snap
Bevor Sie Scroll-Snapping definieren können, müssen Sie das Scrollen in einem Scroll-Container aktivieren. Dies können Sie tun, indem Sie sicherstellen, dass der Scroll-Container eine definierte Größe hat und dass overflow
aktiviert ist.
Danach können Sie das Scroll-Snapping am Scroll-Container mit den folgenden zwei Schlüsseleigenschaften definieren:
scroll-snap-type
: Mit dieser Eigenschaft können Sie festlegen, ob der scrollbare Viewport einrasten kann, ob das Einrasten erforderlich oder optional ist und auf welcher Achse das Einrasten erfolgen soll.scroll-snap-align
: Diese Eigenschaft wird für jedes Kind des Scroll-Containers gesetzt und Sie können damit die Einrastposition jedes Kindes oder das Fehlen einer solchen definieren.scroll-snap-stop
: Diese Eigenschaft sorgt dafür, dass ein Kind während des Scrollens eingerastet und nicht übergangen wird.scroll-margin
: Diese Eigenschaft kann an Kindelementen gesetzt werden, die während des Scrollens eingerastet werden, um einen Abstand von der definierten Box zu schaffen.scroll-padding
: Diese Eigenschaft kann auf den Scroll-Container gesetzt werden, um einen Einrastversatz zu schaffen.
Das unten stehende Beispiel demonstriert das Scroll-Snapping entlang der vertikalen Achse, die durch scroll-snap-type
definiert wird. Zusätzlich wird scroll-snap-align
auf alle Kinder des <section>
-Elements angewendet und bestimmt den Punkt, an dem das Scrollen jedes Kindes enden soll.
<article class="scroller">
<section>
<h2>Section one</h2>
</section>
<section>
<h2>Section two</h2>
</section>
<section>
<h2>Section three</h2>
</section>
</article>
.scroller {
height: 300px;
overflow-y: scroll;
scroll-snap-type: y mandatory;
}
.scroller section {
scroll-snap-align: start;
}
Verwendung von scroll-snap-type
Die scroll-snap-type
-Eigenschaft muss die Achse kennen, entlang der das Scroll-Snapping erfolgt. Dies kann x
, y
oder die logischen Zuordnungen block
oder inline
sein. Sie können auch das Schlüsselwort both
verwenden, um das Scroll-Snapping entlang beider Achsen zu ermöglichen.
Sie können außerdem die Schlüsselwörter mandatory
oder proximity
verwenden. Das Schlüsselwort mandatory
weist den Browser an, dass der Inhalt muss an einen bestimmten Punkt einrasten, egal wo sich das Scrollen befindet. Das Schlüsselwort proximity
bedeutet, dass der Inhalt möglicherweise an den Punkt einrastet, es aber nicht muss.
Die Verwendung von mandatory
sorgt für ein sehr konsistentes Scroll-Erlebnis – Sie wissen, dass der Browser immer an jedem definierten Punkt einrastet. Das bedeutet, dass Sie sicher sein können, dass etwas, das Sie am oberen Rand des Bildschirms erwarten, dort sein wird, wenn das Scrollen endet. Es kann jedoch Probleme verursachen, wenn der Inhalt größer ist als erwartet – Benutzer könnten sich in der frustrierenden Situation wiederfinden, dass sie niemals an einen bestimmten Punkt im Inhalt scrollen können. Daher sollte die Verwendung von mandatory
sorgfältig überlegt erfolgen und nur in Situationen eingesetzt werden, in denen Sie wissen, wie viel Inhalt auf dem Bildschirm oder im scrollbaren Abschnitt zu jeder Zeit vorhanden ist.
Hinweis: Verwenden Sie niemals mandatory
, wenn der Inhalt in einem Ihrer Kindelemente den übergeordneten Container überläuft, da der Benutzer nicht in der Lage sein wird, den überlaufenden Inhalt ins Blickfeld zu scrollen.
Der proximity
-Wert rastet Kindelemente nur dann an einer Position ein, wenn sie sich in der Nähe befinden, wobei die Browser den genauen Abstand bestimmen.
Klicken Sie auf "Play", um das Beispiel unten im MDN Playground zu bearbeiten. Wechseln Sie den Wert von scroll-snap-type
zwischen mandatory
und proximity
, um den Effekt auf das Scroll-Erlebnis zu sehen.
<article class="scroller">
<section>
<h2>Section one</h2>
<p>
Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus
winter purslane kale. Celery potato scallion desert raisin horseradish
spinach carrot soko.
</p>
</section>
<section>
<h2>Section two</h2>
<p>
Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus
winter purslane kale. Celery potato scallion desert raisin horseradish
spinach carrot soko.
</p>
</section>
<section>
<h2>Section three</h2>
<p>
Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus
winter purslane kale. Celery potato scallion desert raisin horseradish
spinach carrot soko.
</p>
</section>
</article>
.scroller {
height: 300px;
overflow-y: scroll;
scroll-snap-type: y mandatory;
}
.scroller section {
scroll-snap-align: start;
}
Im obigen Beispiel sind sowohl height: 300px;
als auch overflow-y: scroll;
auf dem Scroll-Container gesetzt.
Wenn der Inhalt nicht seinen Container überläuft, gibt es nichts zu scrollen.
Verwendung von scroll-snap-align
Die gültigen Werte für die scroll-snap-align
-Eigenschaft umfassen start
, end
, center
und none
. Diese Werte werden verwendet, um den Punkt im Scroll-Container anzuzeigen, an dem der Inhalt einrasten soll. Klicken Sie im Beispiel unten auf "Play" und ändern Sie den Wert von scroll-snap-align
, um zu sehen, wie sich dies auf das Scrollverhalten auswirkt.
.scroller {
height: 200px;
overflow-y: scroll;
scroll-snap-type: y mandatory;
}
.scroller section {
scroll-snap-align: start;
}
Wenn scroll-snap-type
mandatory
ist und scroll-snap-align
auf einem Kind entweder auf none
gesetzt oder nicht gesetzt ist (in diesem Fall wird es standardmäßig auf none
gesetzt), kann der Benutzer dieses Element nicht ins Blickfeld scrollen.
Verwendung von scroll-padding
Wenn Sie start
oder end
verwenden und nicht möchten, dass der Inhalt direkt am Rand des Scroll-Containers einrastet, oder wenn Sie möchten, dass die Einrastposition leicht vom Zentrum versetzt ist, wenn center
verwendet wird, verwenden Sie die scroll-padding
-Eigenschaft oder die entsprechenden Langform-Werte, um etwas Polsterung hinzuzufügen.
Im Beispiel unten ist scroll-padding
auf 50px
gesetzt. Wenn der Inhalt am Anfang des zweiten und dritten Abschnitts einrastet, stoppt das Scrollen 50 Pixel vom Anfang des Abschnitts entfernt. Versuchen Sie, den scroll-padding
-Wert zu ändern, um zu sehen, wie sich dies auf die Distanz auswirkt.
<article class="scroller">
<section>
<h2>Section one</h2>
</section>
<section>
<h2>Section two</h2>
</section>
<section>
<h2>Section three</h2>
</section>
</article>
.scroller {
height: 300px;
overflow-y: scroll;
scroll-snap-type: y mandatory;
scroll-padding: 50px;
}
.scroller section {
scroll-snap-align: start;
}
Dies kann nützlich sein, wenn Sie ein fixed Element wie eine Navigationsleiste haben, die sonst den gescrollten Inhalt überlappen könnte. Mit scroll-padding
können Sie Platz für das feste Element reservieren, wie im unten stehenden Beispiel gezeigt, wo das <h1>
-Element auf dem Bildschirm bleibt, während der Inhalt darunter scrollt. Ohne Polsterung würde die Überschrift beim Einrasten einen Teil des Inhalts überlappen.
.scroller h1 {
position: sticky;
top: 0;
min-height: 40px;
background-color: #000;
color: #fff;
margin: 0;
padding: 0;
}
.scroller h2 {
margin: 0;
padding: 0;
}
.scroller {
height: 300px;
overflow-y: scroll;
scroll-snap-type: y mandatory;
scroll-padding: 50px;
}
.scroller section {
scroll-snap-align: start;
}
Verwendung von scroll-margin
Die scroll-margin
-Eigenschaft oder die Langform-Werte der Scroll-Margin können an Kindelementen gesetzt werden, um einen Abstand von der definierten Box zu schaffen. Dadurch können unterschiedliche Mengen an Platz für verschiedene Kindelemente bereitgestellt werden und sie kann zusammen mit scroll-padding
am übergeordneten Element verwendet werden.
.scroller {
height: 300px;
overflow-y: scroll;
scroll-snap-type: y mandatory;
}
.scroller section {
scroll-snap-align: start;
scroll-margin: 40px;
}
Verwendung von scroll-snap-stop
Verwenden Sie die scroll-snap-stop
-Eigenschaft, um anzugeben, ob das Scrollen an den definierten Einrastpunkten stoppen muss. In den obigen Beispielen würde dies bedeuten, dass das Scrollen am Anfang jedes Abschnitts stoppt oder Abschnitte überspringen kann.
Mit dieser Eigenschaftsdefinition können Sie sicherstellen, dass Benutzer jeden Abschnitt des Scrollbereichs sehen und nicht versehentlich daran vorbeiscrollen. Allerdings kann diese Einstellung auch die Benutzererfahrung negativ beeinflussen, indem sie verhindert, dass der Benutzer schnell zu seinem gewünschten Inhalt scrollt.
Siehe auch
- CSS scroll snap Modul
- Gut kontrolliertes Scrollen mit CSS scroll snap auf web.dev (2021)
- Praktisches CSS Scroll Snapping auf CSS-Tricks (2020)
- CSS scroll snap auf 12 Days of Web (2019)
- Scroll snap Beispiele auf CodePen