Proprit CSS scroll-margin

Exemple interactif

scroll-margin: 0;

scroll-margin: 20px;

scroll-margin: 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">Dfiler </div>
</section>

.default-example .info {
  inline-size: 100%;
  padding: 0.5em 0;
  font-size: 90%;
  writing-mode: vertical-rl;
}

.scroller {
  text-align: left;
  height: 250px;
  width: 270px;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  border: 1px solid black;
  scroll-snap-type: y mandatory;
}

.scroller > div {
  flex: 0 0 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;
}

Proprits constitutives

Cette proprit est une proprit raccourcie pour les proprits CSS suivantes :

• scroll-margin-bottom
• scroll-margin-left
• scroll-margin-right
• scroll-margin-top

Syntaxe

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

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

Valeurs

<length>

Un dcalage par rapport au ct correspondant du conteneur de dfilement.

Description

Vous pouvez voir l'effet de scroll-margin en faisant dfiler le contenu de la  pages  jus' un point intermdiaraire dans l'exemple. La valeur dfinie pour scroll-margin dtermine combien de la page qui est principalement en dehors du port d'accrochage doit rester visible.

Ainsi, les valeurs de scroll-margin reprsentent des marges dfinissant la zone d'accrochage utilise pour aligner cette bote avec le port d'accrochage. La zone d'accrochage est dtermine en prenant la bote de bordure transforme, en trouvant sa bote englobante rectangulaire (aligne sur les axes dans l'espace de coordonnes du conteneur de dfilement), puis en ajoutant les marges dfinies.

Dfinition formelle

Syntaxe formelle

scroll-margin = 
  <length>{1,4}  

Exemples

Dmonstration simple

Cet exemple met en uvre quelque chose de trs similaire l'exemple interactif ci-dessus, sauf qu'ici nous allons vous expliquer comment il est implment.

L'objectif ici est de crer quatre blocs dfilants horizontalement, dont le deuxime et le troisime s'alignent presque, mais pas tout fait, sur le ct gauche de chaque bloc.

HTML

Le HTML inclut un conteneur de dfilement avec quatre enfants :

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

CSS

Parlons du 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 dfilement sont overflow-x: scroll, qui garantit que le contenu dfilera et ne sera pas masqu, et scroll-snap-type: x mandatory, qui dicte que l'accrochage au dfilement doit se produire le long de l'axe horizontal, et que le dfilement s'arrtera toujours sur un point d'accrochage.

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

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

Le plus pertinent ici est scroll-snap-align: start, qui dfinit que les bords gauche (le  dbut  le long de l'axe x, dans notre cas) sont les points d'accrochage dsigns.

Enfin, nous dfinissons les valeurs de marge de dfilement, une diffrente pour le deuxime et le troisime lment enfant :

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

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

Cela signifie que lorsque vous faites dfiler les lments enfants du milieu, le dfilement s'accrochera 1rem en dehors du bord gauche du deuxime <div>, et 2rems en dehors du bord gauche du troisime <div>.

Rsultat

Essayez par vous-mme :

Spcifications

Compatibilit des navigateurs

Voir aussi

• Le module d'accrochage au dfilement CSS
• Contrler prcisment le dfilement avec l'accrochage CSS (angl.) sur web.dev (2018)