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
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
/* 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 initiale | pour chaque propriété individuelle de la propriété raccourcie :
|
---|---|
Applicabilité | conteneurs d'ascenseurs |
Héritée | non |
Pourcentages | relative to the scroll container's scrollport |
Valeur calculée | pour chaque propriété individuelle de la propriété raccourcie :
|
Type d'animation | by computed value type |
Syntaxe formelle
Spécifications
Specification |
---|
CSS Scroll Snap Module Level 1 # scroll-padding |
Compatibilité des navigateurs
BCD tables only load in the browser