scroll-margin-inline

Exemple interactif

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">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: end;
}

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

Propriétés constitutives

Cette propriété est un raccourci pour les propriétés CSS suivantes :

• scroll-margin-inline-end
• scroll-margin-inline-start

Syntaxe

/* Valeurs de type <length> */
scroll-margin-inline: 10px;
scroll-margin-inline: 1em 0.5em;

/* Valeurs globales */
scroll-margin-inline: inherit;
scroll-margin-inline: initial;
scroll-margin-inline: revert;
scroll-margin-inline: revert-layer;
scroll-margin-inline: unset;

Valeurs

<length>

Un décalage par rapport au bord correspondant du conteneur de défilement.

Description

Les valeurs de scroll-margin représentent des décalages définissant la zone d'accrochage au défilement 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 spécifiés.

Définition formelle

Syntaxe formelle

scroll-margin-inline = 
  <length>{1,2}  

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 à droite de chaque bloc.

HTML

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

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

.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 :

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

La partie la plus pertinente ici est scroll-snap-align: end, qui définit que les bords droits (les « fins » 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 :

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

.scroller > div:nth-child(3) {
  scroll-margin-inline: 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 fin en ligne du deuxième <div>, et à 2rem en dehors du bord de fin en ligne du troisième <div>.

Résultat

Essayez par vous-même :

Spécifications

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)