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-margin-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-margin-block est une propriété raccourcie logique qui définit les marges de défilement sur l'axe de bloc (i.e. les propriétés logiquesscroll-margin-block-start etscroll-margin-block-end).
Exemple interactif
scroll-margin-block: 0;scroll-margin-block: 20px;scroll-margin-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 valeurs des marges de défilement correspondent aux décalages entre la zone qui est utilisée pour définir les limites du défilement de la boîtes et la zone de défilement normale (snapport). La zone de défilement est déterminée en prenant la boîte de bordure modifiée, en prenant le rectangle englobant puis en ajoutant les décalages indiqués.
Syntaxe
/* Valeurs de longueur *//* 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: unset;Valeurs
<length>Un décalage par rapport au côté correspondant du conteneur de défilement.
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
| Specification |
|---|
| CSS Scroll Snap Module Level 1 # propdef-scroll-margin-block |