scroll-padding-block
Baseline
Large disponibilité
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é raccourcie CSS scroll-padding-block définit le padding de défilement d'un élément dans la dimension de bloc.
Exemple interactif
scroll-padding-block: 0;
scroll-padding-block: 20px;
scroll-padding-block: 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">Défiler »</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: white;
font-size: 30px;
display: flex;
align-items: center;
justify-content: center;
scroll-snap-align: start;
}
.scroller > div:nth-child(even) {
background-color: white;
color: rebeccapurple;
}
Les propriétés scroll-padding définissent des décalages pour la zone de visualisation optimale de la zone de défilement : la région utilisée comme zone cible pour placer des éléments à la vue de l'utilisateur·ice. Cela permet à l'auteur·ice d'exclure des régions de la zone de défilement qui sont masquées par d'autres contenus (comme des barres d'outils ou des barres latérales en position fixe) ou de laisser plus d'espace entre un élément ciblé et les bords de la zone de défilement.
Propriétés constitutives
Cette propriété est un raccourci pour les propriétés CSS suivantes :
Syntaxe
/* Valeurs avec un mot-clé */
scroll-padding-block: auto;
/* Valeurs de 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: revert;
scroll-padding-block: revert-layer;
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.
auto-
Le 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 | relatif à la zone de défilement du conteneur de défilement |
| Valeur calculée | pour chaque propriété individuelle de la propriété raccourcie :
|
| Type d'animation | par type de valeur calculée |
Syntaxe formelle
scroll-padding-block =
[ auto | <length-percentage [0,∞]> ]{1,2}
<length-percentage> =
<length> |
<percentage>
Spécifications
| Spécification |
|---|
| CSS Scroll Snap Module Level 1 # propdef-scroll-padding-block |
Compatibilité des navigateurs
Voir aussi
- Le module d'accrochage au défilement CSS
- Contrôler précisément le défilement avec l'accrochage CSS (angl.) sur web.dev (2018)