scroll-margin-inline-start
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
Die Eigenschaft scroll-margin-inline-start
definiert den Rand des "scroll snap"-Bereichs am Anfang der Inline-Dimension, der verwendet wird, um diese Box an den Snapport zu schnappen. Der "scroll snap"-Bereich wird bestimmt, indem die transformierte Border-Box genommen, deren rechteckige Begrenzungsbox (achsenbündig im Koordinatenraum des Scroll-Containers) gefunden und dann die angegebenen Abstände hinzugefügt werden.
Probieren Sie es aus
Syntax
/* <length> values */
scroll-margin-inline-start: 10px;
scroll-margin-inline-start: 1em;
/* Global values */
scroll-margin-inline-start: inherit;
scroll-margin-inline-start: initial;
scroll-margin-inline-start: revert;
scroll-margin-inline-start: revert-layer;
scroll-margin-inline-start: unset;
Werte
<length>
-
Ein Abstand vom Inline-Start des Scroll-Containers.
Formale Definition
Anfangswert | 0 |
---|---|
Anwendbar auf | alle Elemente |
Vererbt | Nein |
Berechneter Wert | wie angegeben |
Animationstyp | by computed value type |
Formale Syntax
scroll-margin-inline-start =
<length>
Beispiele
Grundlegende Demonstration
Dieses Beispiel implementiert etwas sehr Ähnliches wie das interaktive Beispiel oben, jedoch werden wir Ihnen hier erklären, wie es implementiert wird.
Das Ziel hier ist es, vier horizontal scrollbare Blöcke zu erstellen, von denen der zweite und dritte an einer Stelle einrasten, die sich nah, aber nicht ganz links in jedem Block befindet.
HTML
Der HTML-Code enthält einen Scroller mit vier Kind-Elementen:
<div class="scroller">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
CSS
Schauen wir uns den CSS-Code an. 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 #000;
scroll-snap-type: x mandatory;
}
Die Hauptteile, die für das Scroll-Snapping relevant sind, sind overflow-x: scroll
, was sicherstellt, dass der Inhalt gescrollt wird und nicht versteckt ist, und scroll-snap-type: x mandatory
, was vorschreibt, dass das Scroll-Snapping entlang der horizontalen Achse erfolgen muss und das Scrollen immer an einem Snap-Punkt zum Stehen kommt.
Die Kindelemente sind wie folgt gestylt:
.scroller > div {
flex: 0 0 250px;
width: 250px;
background-color: #663399;
color: #fff;
font-size: 30px;
display: flex;
align-items: center;
justify-content: center;
scroll-snap-align: start;
}
.scroller > div:nth-child(2n) {
background-color: #fff;
color: #663399;
}
Der relevanteste Teil hier ist scroll-snap-align: start
, das angibt, dass die linken Kanten (die "Starts" entlang der x-Achse, in unserem Fall) die festgelegten Snap-Punkte sind.
Zuletzt spezifizieren wir die Scroll-Margin-Werte, verschiedene für das zweite und dritte Kindelement:
.scroller > div:nth-child(2) {
scroll-margin-inline-start: 1rem;
}
.scroller > div:nth-child(3) {
scroll-margin-inline-start: 2rem;
}
Das bedeutet, dass beim Scrollen über die mittleren Kindelemente das Scrollen an 1rem
außerhalb der Inline-Startkante des zweiten <div>
und 2rems
außerhalb der Inline-Startkante des dritten <div>
einrastet.
Ergebnis
Probieren Sie es selbst aus:
Spezifikationen
Specification |
---|
CSS Scroll Snap Module Level 1 # margin-longhands-logical |
Browser-Kompatibilität
BCD tables only load in the browser