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 September 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