Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
scroll-padding-block
Baseline Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis septembre 2021.
La propriétéscroll-padding-block est une propriété raccourcie qui permet de définir le remplissage, sur l'axe de bloc, entre l'élément et la zone de défilement. Autrement dit, elle permet de définirscroll-padding-block-end etscroll-padding-block-start.
Exemple interactif
scroll-padding-block: 0;scroll-padding-block: 20px;scroll-padding-block: 2em;<section> <div> <div>1</div> <div>2</div> <div>3</div> </div> <div>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 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.
Syntaxe
/* Valeurs avec un mot-clé */scroll-padding-block: auto;/* Valeurs de longueur *//* Type <length> */scroll-padding-block: 10px;scroll-padding-block: 1em 0.5em;scroll-padding-block: 10%;/* Valeurs globales */scroll-padding-block: inherit;scroll-padding-block: initial;scroll-padding-block: 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.
autoLe décalage est déterminé par l'agent utilisateur. Cette valeur correspond généralement à
0pxmais 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
scroll-padding-block =
[auto|<length-percentage [0,∞]>]{1,2}
<length-percentage> =
<length>|
<percentage>
Spécifications
| Specification |
|---|
| CSS Scroll Snap Module Level 1 # propdef-scroll-padding-block |