scroll-margin-inline-start

Baseline Large disponibilité

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é CSS scroll-margin-inline-start définit la marge de la zone d'accrochage au défilement au début de la dimension en ligne, utilisée pour accrocher cette boîte au port d'accrochage. La zone d'accrochage au défilement est déterminée en prenant la boîte de bordure transformée, en trouvant sa boîte englobante rectangulaire (alignée sur les axes dans l'espace de coordonnées du conteneur de défilement), puis en ajoutant les décalages définis.

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">Défiler »</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: start;
}

.scroller > div:nth-child(even) {
  background-color: white;
  color: rebeccapurple;
}

Syntaxe

css

/* Valeurs de 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: revert;
scroll-margin-inline-start: revert-layer;
scroll-margin-inline-start: unset;

Valeurs

<length>: Un décalage par rapport au bord de début en ligne du conteneur de défilement.

Définition formelle

Valeur initiale	`0`
Applicabilité	tous les éléments
Héritée	non
Valeur calculée	comme défini
Type d'animation	par type de valeur calculée

Syntaxe formelle

scroll-margin-inline-start = 
  <length>

Exemples

Démonstration simple

Cet exemple met en œuvre quelque chose de très similaire à l'exemple interactif ci-dessus, sauf qu'ici nous allons vous expliquer comment il est implémenté.

L'objectif ici est de créer quatre blocs défilants horizontalement, dont le deuxième et le troisième s'accrochent en place, près mais pas tout à fait à gauche de chaque bloc.

HTML

Le HTML inclut un conteneur de défilement avec quatre enfants :

html

<div class="scroller">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

CSS

Passons en revue le CSS. Le conteneur externe est mis en forme comme ceci :

css

.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;
}

Les parties principales pertinentes pour l'accrochage au défilement sont overflow-x: scroll, qui garantit que le contenu défilera et ne sera pas masqué, et scroll-snap-type: x mandatory, qui indique que l'accrochage au défilement doit se produire le long de l'axe horizontal, et que le défilement s'arrêtera toujours sur un point d'accrochage.

Les éléments enfants sont mis en forme comme suit :

css

.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: start;
}

.scroller > div:nth-child(2n) {
  background-color: white;
  color: rebeccapurple;
}

La partie la plus pertinente ici est scroll-snap-align: start, qui définit que les bords gauche (les « début » le long de l'axe x, dans notre cas) sont les points d'accrochage désignés.

Enfin, nous définissons les valeurs de marge de défilement, une différente pour le deuxième et le troisième élément enfant :

css

.scroller > div:nth-child(2) {
  scroll-margin-inline-start: 1rem;
}

.scroller > div:nth-child(3) {
  scroll-margin-inline-start: 2rem;
}

Cela signifie que lorsque vous faites défiler les éléments enfants du milieu, le défilement s'accrochera à 1rem en dehors du bord de début en ligne du deuxième <div>, et à 2rem en dehors du bord de début en ligne du troisième <div>.

Résultat

Essayez par vous-même :

Spécifications

Spécification
CSS Scroll Snap Module Level 1 # margin-longhands-logical

Compatibilité des navigateurs

Voir aussi

Le module d'accrochage au défilement CSS
Contrôler précisément le défilement avec l'accrochage CSS ^(angl.) sur web.dev (2018)

Aider à améliorer MDN

Apprendre à contribuer

Cette page a été modifiée le 24 mars 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu