scroll-padding
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 avril 2021.
La propriété raccourcie CSS scroll-padding définit le padding de défilement sur tous les côtés d'un élément à la fois. Elle définit des décalages qui déterminent la zone de visualisation optimale d'un viewport de défilement à l'intérieur d'un conteneur de défilement.
Exemple interactif
scroll-padding: 0;
scroll-padding: 20px;
scroll-padding: 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;
}
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: auto;
/* Valeurs de 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: revert;
scroll-padding: revert-layer;
scroll-padding: unset;
Valeurs
<length-percentage>-
Un décalage vers l'intérieur depuis le bord correspondant de la zone de défilement, exprimé comme une
<length>valide ou une<percentage>. auto-
Le décalage est déterminé par l'agent utilisateur. Il sera généralement
0px, mais l'agent utilisateur peut détecter et faire autrement si une valeur non nulle est plus appropriée.
Description
La propriété scroll-padding est une propriété raccourcie qui définit scroll-padding-top, scroll-padding-right, scroll-padding-bottom et scroll-padding-left, dans cet ordre, réglant respectivement le padding de défilement en haut, à droite, en bas et à gauche d'un conteneur de défilement.
Utile lors de la création de conteneurs d'accrochage de défilement, la propriété scroll-padding permet de définir 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. Cela permet de créer des encarts dans la zone de défilement pour laisser de la place aux objets qui pourraient masquer le contenu, tels que des barres d'outils ou des barres latérales en position fixe, ou pour laisser plus d'espace entre un élément ciblé et les bords de la zone de défilement.
Bien que définie dans le module d'accrochage de défilement CSS, cette propriété s'applique à tous les conteneurs de défilement, quelle que soit la valeur de la propriété scroll-snap-type.
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 =
[ auto | <length-percentage [0,∞]> ]{1,4}
<length-percentage> =
<length> |
<percentage>
Spécifications
| Spécification |
|---|
| CSS Scroll Snap Module Level 1 # scroll-padding |
Compatibilité des navigateurs
Voir aussi
- La propriété
scroll-snap-type - Concepts de base de l'accrochage de défilement
- Le module d'accrochage de défilement CSS
- Le module de débordement CSS
- Le module d'animations CSS pilotées par le défilement