scroll-margin-inline CSS-Eigenschaft
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit September 2021 browserübergreifend verfügbar.
Die scroll-margin-inline CSS Shorthand-Eigenschaft legt die Scroll-Margen eines Elements in der Inline-Dimension fest.
Probieren Sie es aus
scroll-margin-inline: 0;
scroll-margin-inline: 40px 20px;
scroll-margin-inline: 4em 0;
scroll-margin-inline: 0px 3em;
<section class="default-example" id="default-example">
<div class="scroller">
<div>1</div>
<div id="example-element">2</div>
<div>3</div>
</div>
<div class="info">Scroll »</div>
</section>
.default-example {
flex-wrap: wrap;
}
.default-example .info {
width: 100%;
padding: 0.5em 0;
font-size: 90%;
}
.scroller {
text-align: left;
width: 250px;
height: 250px;
overflow-x: scroll;
display: flex;
box-sizing: border-box;
border: 1px solid black;
scroll-snap-type: x mandatory;
}
.scroller > div {
flex: 0 0 250px;
width: 250px;
background-color: rebeccapurple;
color: white;
font-size: 30px;
display: flex;
align-items: center;
justify-content: center;
scroll-snap-align: end;
}
.scroller > div:nth-child(even) {
background-color: white;
color: rebeccapurple;
}
Bestandeigenschaften
Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:
Syntax
/* <length> values */
scroll-margin-inline: 10px;
scroll-margin-inline: 1em 0.5em;
/* Global values */
scroll-margin-inline: inherit;
scroll-margin-inline: initial;
scroll-margin-inline: revert;
scroll-margin-inline: revert-layer;
scroll-margin-inline: unset;
Werte
<length>-
Ein Vorsprung vom entsprechenden Rand des Scroll-Containers.
Beschreibung
Die scroll-margin-Werte repräsentieren Vorsprünge, die den Scroll-Snap-Bereich definieren, der verwendet wird, um diese Box an den Snapport zu schnappen. Der Scroll-Snap-Bereich wird bestimmt, indem die transformierte Rand-Box genommen, ihre rechteckige Begrenzungsbox (achsenparallel im Koordinatenraum des Scroll-Containers) ermittelt und dann die angegebenen Vorsprünge hinzugefügt werden.
Formale Definition
| Anfangswert | wie die jeweiligen Kurzschreibweisen: |
|---|---|
| Anwendbar auf | alle Elemente |
| Vererbt | Nein |
| Berechneter Wert | wie die jeweiligen Kurzschreibweisen:
|
| Animationstyp | by computed value type |
Formale Syntax
scroll-margin-inline =
<length>{1,2}
Beispiele
Grundlegende Demonstration
Dieses Beispiel implementiert etwas sehr Ähnliches wie das interaktive Beispiel oben, außer dass wir Ihnen hier erklären, wie es implementiert wird.
Ziel ist es, vier horizontal scrollende Blöcke zu erstellen, wobei der zweite und dritte Block einrastet, nahe, aber nicht ganz am rechten Rand jedes Blocks.
HTML
Das HTML enthält einen Scroller mit vier Kindern:
<div class="scroller">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
CSS
Lassen Sie uns das CSS durchgehen. Der äußere Container ist wie folgt gestylt:
.scroller {
text-align: left;
width: 250px;
height: 250px;
overflow-x: scroll;
display: flex;
box-sizing: border-box;
border: 1px solid black;
scroll-snap-type: x mandatory;
}
Die Hauptteile, die für das Scroll-Snapping relevant sind, sind overflow-x: scroll, was sicherstellt, dass die Inhalte scrollen und nicht ausgeblendet werden, und scroll-snap-type: x mandatory, was vorschreibt, dass Scroll-Snapping entlang der horizontalen Achse auftreten muss und das Scrollen immer an einem Snap-Punkt zur Ruhe kommt.
Die Kindelemente sind wie folgt gestylt:
.scroller > div {
flex: 0 0 250px;
width: 250px;
background-color: rebeccapurple;
color: white;
font-size: 30px;
display: flex;
align-items: center;
justify-content: center;
scroll-snap-align: end;
}
.scroller > div:nth-child(2n) {
background-color: white;
color: rebeccapurple;
}
Der relevanteste Teil hier ist scroll-snap-align: end, was spezifiziert, dass die rechten Kanten (die "Ends" entlang der x-Achse, in unserem Fall) die festgelegten Snap-Punkte sind.
Schließlich spezifizieren wir die Scroll-Margen-Werte, einen anderen für das zweite und dritte Kindelement:
.scroller > div:nth-child(2) {
scroll-margin-inline: 1rem;
}
.scroller > div:nth-child(3) {
scroll-margin-inline: 2rem;
}
Dies bedeutet, dass beim Scrollen über die mittleren Kindelemente das Scrollen auf 1rem außerhalb der Inline-Endkante des zweiten <div> und 2rems außerhalb der Inline-Endkante des dritten <div> einrastet.
Hinweis:
Hier setzen wir scroll-margin sowohl am Anfang als auch am Ende der Inline-Achse (x in unserem Fall), aber nur die Endkante ist wirklich relevant. Es würde hier genauso gut funktionieren, nur eine Scroll-Marge auf dieser einen Kante zu setzen, zum Beispiel mit scroll-margin-inline: 0 1rem, oder scroll-margin-inline-end: 1rem.
Ergebnis
Versuchen Sie es selbst:
Spezifikationen
| Spezifikation |
|---|
| CSS Scroll Snap Module Level 1 # propdef-scroll-margin-inline |
Browser-Kompatibilität
Siehe auch
- CSS scroll snap-Modul
- Gut kontrolliertes Scrollen mit CSS scroll snap auf web.dev (2018)