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).
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
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 .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.
Syntaxe formelle
[ auto | <length-percentage> ]{1,4}où
<length-percentage> = <length> | <percentage>
Specifications
Spécification | État | Commentaires |
---|---|---|
CSS Scroll Snap Module Level 1 La définition de 'scroll-padding' dans cette spécification. |
Candidat au statut de recommandation | Définition initiale. |
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 |
Compatibilité des navigateurs
BCD tables only load in the browser