scroll-margin-bottom

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.

La propriété scroll-margin-bottom définit la marge de défilement de l'élément sur le côté bas. 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-bottom: 0;

scroll-margin-bottom: 20px;

scroll-margin-bottom: 2em;


  
    1
    2
    3
  
  Scroll »

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

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

Syntaxe

css

/* Valeurs de longueur */
/* Type  */
scroll-margin-bottom: 10px;
scroll-margin-bottom: 1em;

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

Valeurs

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

Spécifications

Specification
CSS Scroll Snap Module Level 1 # margin-longhands-physical