Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.
Obsolète
Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.
La propriété scroll-snap-coordinate définit les coordonnées horizontale et verticale, au sein de l'élément, qui s'aligneront avec les points définis par scroll-snap-destination dans le conteneur le plus proche en termes de parenté.
Si l'élément a été transformé, les coordonnées sont transformées de la même façon afin d'aligner le point d'accroche avec l'élément tel qu'il est affiché.
| Valeur initiale | none |
|---|---|
| Applicabilité | tous les éléments |
| Héritée | non |
| Pourcentages | fait référence à l'élément border box |
| Média | interactif |
| Valeur calculée | comme spécifié, mais avec les longueurs relatives converties en longueurs absolues |
| Type d'animation | une position |
| Ordre canonique | l'ordre unique et non-ambigu défini par la grammaire formelle |
Syntaxe
/* Valeur avec un mot-clé */ scroll-snap-coordinate: none; /* Valeurs de <position> */ /* Une paire de coordonnées */ scroll-snap-coordinate: 50px 50px; /* Plusieurs coordonnées */ scroll-snap-coordinate: 100px 100px, 100px bottom; /* Valeurs globales */ scroll-snap-coordinate: inherit; scroll-snap-coordinate: initial; scroll-snap-coordinate: unset;
Valeurs
none- L'élément ne contribue à aucun point d'accrochage.
<position>- Définit le décalage du point d'accrochage par rapport à la boîte de bordure le l'élément. Pour chaque paire, la première valeur indique l'abscisse et la seconde, l'ordonnée.
Syntaxe formelle
none | <position>#où
<position> = [[ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]]où
<length-percentage> = <length> | <percentage>
Exemples
HTML
<div id="container"> <div> <p>Coordonnées (0, 0)</p> <div class="scrollContainer coordinate0"> <div>1</div> <div>2</div> <div>3</div> </div> </div> <div> <p>Coordonnées (25, 0)</p> <div class="scrollContainer coordinate25"> <div>1</div> <div>2</div> <div>3</div> </div> </div> <div> <p>Coordonnées (50, 0)</p> <div class="scrollContainer coordinate50"> <div>1</div> <div>2</div> <div>3</div> </div> </div> </div>
CSS
#container {
display: flex;
}
#container > div:nth-child(-n+2) {
margin-right: 20px;
}
.scrollContainer {
width: 100px;
overflow: auto;
white-space: nowrap;
scroll-snap-type: mandatory;
font-size: 0;
}
.scrollContainer > div {
width: 100px;
height: 100px;
display: inline-block;
line-height: 100px;
text-align: center;
font-size: 50px;
}
.coordinate0 > div {
scroll-snap-coordinate: 0 0;
}
.coordinate25 > div {
scroll-snap-coordinate: 25px 0;
}
.coordinate50 > div {
scroll-snap-coordinate: 50px 0;
}
.scrollContainer > div:nth-child(even) {
background-color: #87ea87;
}
.scrollContainer > div:nth-child(odd) {
background-color: #87ccea;
}
Résultat
Spécification
| Spécification | Statut | Commentaires |
|---|---|---|
| CSS Scroll Snap Points Module Level 1 La définition de 'scroll-snap-coordinate' dans cette spécification. |
Version de travail | Définition initiale. |
Compatibilité des navigateurs
| Fonctionnalité | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Support simple | ? | 39.0 (39.0) | Pas de support | Pas de support | Pas de support |
| Fonctionnalité | Android | Firefox Mobile (Gecko) | Firefox OS | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Support simple | Pas de support | 39.0 (39.0)[1] | 39.0 (39.0) | Pas de support | Pas de support | Pas de support |
[1] Sur Firefox Mobile, cette fonctionnalité est disponible depuis Gecko 39 mais désactivée par défaut avec la préférence layout.css.vertical-text.enabled.