scroll-snap-align
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 janvier 2020.
La propriété CSS scroll-snap-align définit la position d'accrochage de la boîte comme un alignement de sa zone d'accrochage (en tant que sujet d'alignement) à l'intérieur du port d'accrochage de son conteneur (en tant que conteneur d'alignement).
Exemple interactif
scroll-snap-align: start;
scroll-snap-align: end;
scroll-snap-align: center;
<section class="default-example" id="default-example">
<div id="example-parent">
<div>1</div>
<div id="example-element">2</div>
<div>3</div>
</div>
<div class="info">Défiler »</div>
</section>
.default-example {
flex-wrap: wrap;
}
.default-example .info {
width: 100%;
padding: 0.5em 0;
font-size: 90%;
}
#example-parent {
text-align: left;
width: 250px;
height: 250px;
overflow-x: scroll;
display: flex;
box-sizing: border-box;
border: 1px solid black;
scroll-snap-type: x mandatory;
}
#example-parent > div {
flex: 0 0 66%;
width: 250px;
background-color: rebeccapurple;
color: white;
font-size: 30px;
display: flex;
align-items: center;
justify-content: center;
}
#example-parent > div:nth-child(even) {
background-color: white;
color: rebeccapurple;
}
Syntaxe
/* Valeurs avec un mot-clé */
scroll-snap-align: none;
scroll-snap-align: center;
scroll-snap-align: start;
scroll-snap-align: end;
/* Valeurs avec deux mots-clés */
scroll-snap-align: start end;
scroll-snap-align: end center;
scroll-snap-align: center start;
/* Valeurs globales */
scroll-snap-align: inherit;
scroll-snap-align: initial;
scroll-snap-align: revert;
scroll-snap-align: revert-layer;
scroll-snap-align: unset;
Valeurs
Une ou deux valeurs peuvent être définies pour la propriété scroll-snap-align. Si une seule valeur est définie, elle s'applique aux axes bloc et en ligne. Si deux valeurs sont définies, la première valeur contrôle l'axe bloc et la deuxième valeur contrôle l'axe en ligne.
none-
La boîte ne définit aucune position d'accroche sur cet axe.
start-
L'alignement de début de la zone d'accrochage de cette boîte, à l'intérieur du port d'accrochage du conteneur de défilement, est une position d'accroche sur cet axe.
end-
L'alignement de fin de la zone d'accrochage de cette boîte, à l'intérieur du port d'accrochage du conteneur de défilement est une position d'accroche sur cet axe.
center-
Le point d'alignement situé au centre de l'axe et à l'intérieur de la boîte de défilement est une position d'accroche sur cet axe.
Définition formelle
| Valeur initiale | none |
|---|---|
| Applicabilité | tous les éléments |
| Héritée | non |
| Valeur calculée | comme défini |
| Type d'animation | discrète |
Syntaxe formelle
scroll-snap-align =
[ none | start | end | center ]{1,2}
Spécifications
| Spécification |
|---|
| CSS Scroll Snap Module Level 1 # scroll-snap-align |
Compatibilité des navigateurs
Voir aussi
- La propriété
scroll-snap-stop - La propriété
scroll-initial-target - 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)