scroll-padding-inline-end

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-inline-end est une propriété qui permet de définir le remplissage, à la fin de l'axe en ligne, entre l'élément et la zone de défilement.

Les propriétés pour le remplissage de la zone de défilement 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.

Exemple interactif

scroll-padding-inline-end: 0;

scroll-padding-inline-end: 20px;

scroll-padding-inline-end: 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 {
  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: #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 avec un mot-clé */
scroll-padding-inline-end: auto;

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

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

Valeurs

<length-percentage>: Un décalage intérieur entre la boîte de défilement et le bord correspondant de l'élément. C'est une longueur ou un pourcentage 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 initiale	`auto`
Applicabilité	conteneurs d'ascenseurs
Héritée	non
Pourcentages	relative to the scroll container's scrollport
Valeur calculée	comme spécifié
Type d'animation	by computed value type

Syntaxe formelle

scroll-padding-inline-end = 
  auto                       |
  <length-percentage [0,∞]>  

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

Spécifications

Specification
CSS Scroll Snap Module Level 1 # padding-longhands-logical