scroll-padding

Baseline Widely available

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

La propriété scroll-padding est une propriété raccourcie qui permet de définir l'ensemble des propriétés scroll-padding-top, scroll-padding-right, scroll-padding-bottom et scroll-padding-left (de la même façon que la propriété padding permet de définir les propriétés détaillées associées).

Exemple interactif

scroll-padding: 0;

scroll-padding: 20px;

scroll-padding: 2em;

<section class="default-example" id="default-example">
  <div class="scroller" id="example-element">
    <div>1</div>
    <div>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 propriétés scroll-padding-* permettent de définir des décalages par rapport à la zone de défilement de l'élément (scrollport). On peut ainsi éviter à un élément d'être affiché là où d'autres barres sont présentes ou encore donner plus d'espace entre un élément et les barres de défilement pour y naviguer.

Syntaxe

css
/* Valeurs avec un mot-clé */
scroll-padding: auto;

/* Valeurs de longueur */
/* Type <length> */
scroll-padding: 10px;
scroll-padding: 1em 0.5em 1em 1em;
scroll-padding: 10%;

/* Valeurs globales */
scroll-padding: inherit;
scroll-padding: initial;
scroll-padding: unset;

Valeurs

<length-percentage>

Un décalage intérieur entre la boîte de défilement et le bord correspondant de l'élément. Cette valeur, de type <length-percentage>, est une longueur (<length>) ou un pourcentage (<percentage>) valide.

auto

Le décalage est déterminé par l'agent utilisateur. Cette valeur correspond généralement à 0px mais le navigateur peut utiliser une heuristique et déterminer si une valeur non nulle est préférable au regard du contexte dans lequel se trouve l'élément.

Définition formelle

Valeur initialepour chaque propriété individuelle de la propriété raccourcie :
Applicabilitéconteneurs d'ascenseurs
Héritéenon
Pourcentagesrelative to the scroll container's scrollport
Valeur calculéepour chaque propriété individuelle de la propriété raccourcie :
Type d'animationby computed value type

Syntaxe formelle

scroll-padding = 
  [ auto | <length-percentage [0,∞]> ]{1,4}  

<length-percentage> = 
  <length>      |
  <percentage>

Spécifications

Specification
CSS Scroll Snap Module Level 1
# scroll-padding

Compatibilité des navigateurs