scroll-margin-inline-start
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis septembre 2021.
La propriété scroll-margin-inline-start définit la marge de défilement de l'élément sur le début de l'axe en ligne. La zone de défilement est déterminée en prenant la boîte de bordure modifiée, en prenant le rectangle englobant puis en ajoutant les décalages indiqués.
Exemple interactif
scroll-margin-inline-start: 0;
scroll-margin-inline-start: 20px;
scroll-margin-inline-start: 2em;
<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: #fff;
font-size: 30px;
display: flex;
align-items: center;
justify-content: center;
scroll-snap-align: start;
}
.scroller > div:nth-child(even) {
background-color: #fff;
color: rebeccapurple;
}
Syntaxe
css
/* Valeurs de longueur */
/* Type <length> */
scroll-margin-inline-start: 10px;
scroll-margin-inline-start: 1em;
/* Valeurs globales */
scroll-margin-inline-start: inherit;
scroll-margin-inline-start: initial;
scroll-margin-inline-start: unset;
Valeurs
<length>-
Un décalage par rapport au côté correspondant du conteneur de défilement.
Définition formelle
| Valeur initiale | 0 |
|---|---|
| Applicabilité | tous les éléments |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | by computed value type |
Syntaxe formelle
scroll-margin-inline-start =
<length>
Spécifications
| Specification |
|---|
| CSS Scroll Snap Module Level 1 # margin-longhands-logical |
Compatibilité des navigateurs
Chargement…