scroll-margin-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-margin-block définit les marges de défilement d'un élément dans la dimension de bloc.
Exemple interactif
scroll-margin-block: 0;
scroll-margin-block: 20px;
scroll-margin-block: 2em;
<section class="default-example" id="default-example">
<div class="scroller">
<div>1</div>
<div id="example-element">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 une propriété raccourcie pour les propriétés CSS suivantes :
Syntaxe
/* Valeurs de type <length> */
scroll-margin-block: 10px;
scroll-margin-block: 1em 0.5em;
/* Valeurs globales */
scroll-margin-block: inherit;
scroll-margin-block: initial;
scroll-margin-block: revert;
scroll-margin-block: revert-layer;
scroll-margin-block: unset;
Valeurs
<length>-
Un décalage par rapport au bord correspondant du conteneur de défilement.
Description
Les valeurs de scroll-margin représentent des décalages définissant la zone de capture de défilement utilisée pour accrocher cette boîte au port d'accrochage. La zone de capture de défilement est déterminée en prenant la boîte de bordure transformée, en trouvant sa boîte englobante rectangulaire (alignée sur les axes dans l'espace de coordonnées du conteneur de défilement), puis en ajoutant les décalages définis.
Définition formelle
| Valeur initiale | pour chaque propriété individuelle de la propriété raccourcie : |
|---|---|
| Applicabilité | tous les éléments |
| Héritée | non |
| 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-margin-block =
<length>{1,2}
Spécifications
| Spécification |
|---|
| CSS Scroll Snap Module Level 1 # propdef-scroll-margin-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)