La propriété scroll-padding-bottom
est une propriété qui permet de définir le remplissage sur le côté bas 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.
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 !
Syntaxe
/* Valeurs avec un mot-clé */ scroll-padding-bottom: auto; /* Valeurs de longueur */ /* Type <length> */ scroll-padding-bottom: 10px; scroll-padding-bottom: 1em; scroll-padding-bottom: 10%; /* Valeurs globales */ scroll-padding-bottom: inherit; scroll-padding-bottom: initial; scroll-padding-bottom: 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.
Syntaxe formelle
auto | <length-percentage>où
<length-percentage> = <length> | <percentage>
Specifications
Spécification | État | Commentaires |
---|---|---|
CSS Scroll Snap Module Level 1 La définition de 'scroll-padding-bottom' 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 |
Média | visuel |
Valeur calculée | comme spécifié |
Type d'animation | by computed value type |
Ordre canonique | selon la grammaire |
Compatibilité des navigateurs
Ordinateur | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
scroll-padding-bottom | Chrome Support complet 69 | Edge Aucun support Non | Firefox Support complet 68 | IE Aucun support Non | Opera Support complet 56 | Safari Support complet 11 | WebView Android Support complet 69 | Chrome Android Support complet 69 | Firefox Android Support complet 68 | Opera Android Support complet 48 | Safari iOS Support complet 11 | Samsung Internet Android Aucun support Non |
Légende
- Support complet
- Support complet
- Aucun support
- Aucun support