scroll-margin-inline
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2021.
Die scroll-margin-inline-Kurzschreibweise setzt die Scroll-Margen eines Elements in der Inline-Dimension.
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;
}
Einzelne Eigenschaften
Diese Eigenschaft ist eine Kurzschreibweise 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 Außenabstand vom entsprechenden Rand des Scroll-Containers.
Beschreibung
Die scroll-margin-Werte stellen Außenabstände dar, 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 Rahmenbox genommen, ihre rechteckige Begrenzungsbox im Koordinatenraum des Scroll-Containers gefunden und dann die angegebenen Außenabstände 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.
Das Ziel ist es, vier horizontal scrollbare Blöcke zu erstellen, von denen der zweite und dritte in der Nähe, aber nicht ganz am rechten Rand jedes Blocks einrasten.
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 folgendermaßen gestaltet:
.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 verborgen werden, und scroll-snap-type: x mandatory, was vorschreibt, dass Scroll-Snapping entlang der horizontalen Achse erfolgen muss und das Scrollen immer an einem Snap-Punkt zur Ruhe kommt.
Die Kind-Elemente sind wie folgt gestaltet:
.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, das angibt, dass die rechten Kanten (die "Ends" entlang der x-Achse in unserem Fall) die vorgesehenen Snap-Punkte sind.
Zuletzt geben wir die Scroll-Margen-Werte an, einen unterschiedlichen für das zweite und dritte Kind-Element:
.scroller > div:nth-child(2) {
scroll-margin-inline: 1rem;
}
.scroller > div:nth-child(3) {
scroll-margin-inline: 2rem;
}
Das bedeutet, dass beim Scrollen an den mittleren Kind-Elementen vorbei das Scrollen 1rem außerhalb des Inline-Endrandes des zweiten <div> und 2rems außerhalb des Inline-Endrandes des dritten <div> einrastet.
Hinweis:
Hier setzen wir scroll-margin am Anfang und Ende der Inline-Achse (x in unserem Fall), aber nur der Endrand ist wirklich relevant. Es würde hier genauso gut funktionieren, nur eine Scroll-Marge auf diesem einen Rand zu setzen, zum Beispiel mit scroll-margin-inline: 0 1rem, oder scroll-margin-inline-end: 1rem.
Ergebnis
Probieren Sie es selbst:
Spezifikationen
| Specification |
|---|
| CSS Scroll Snap Module Level 1 # propdef-scroll-margin-inline |