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>  <div>    <div>1</div>    <div>2</div>    <div>3</div>  </div>  <div>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;