scroll-margin-block

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-block est une propriété raccourcie logique qui définit les marges de défilement sur l'axe de bloc (i.e. les propriétés logiques scroll-margin-block-start et scroll-margin-block-end).

Exemple interactif

scroll-margin-block: 0;

scroll-margin-block: 20px;

scroll-margin-block: 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 .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: #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;
}

Les valeurs des marges de défilement correspondent aux décalages entre la zone qui est utilisée pour définir les limites du défilement de la boîtes et la zone de défilement normale (snapport). 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.

Syntaxe

css
/* Valeurs de longueur */
/* Type <length> */
scroll-margin-block: 10px;
scroll-margin-block: 1em 0.5em;

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

Valeurs

<length>

Un décalage par rapport au côté correspondant du conteneur de défilement.

Définition formelle

Valeur initialepour chaque propriété individuelle de la propriété raccourcie :
Applicabilitétous les éléments
Héritéenon
Valeur calculéepour chaque propriété individuelle de la propriété raccourcie :
Type d'animationby computed value type

Syntaxe formelle

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

Spécifications

Specification
CSS Scroll Snap Module Level 1
# propdef-scroll-margin-block

Compatibilité des navigateurs