Non standard
Cette fonctionnalité n'est ni standard, ni en voie de standardisation. Ne l'utilisez pas pour des sites accessibles sur le Web : elle ne fonctionnera pas pour tout utilisateur. Il peut également y avoir d'importantes incompatibilités entre les implémentations et son comportement peut être modifié dans le futur.
La propriété CSS -ms-scroll-snap-points-x est une propriété spécifique à Microsoft qui définit l'emplacement des points d'accroche le long de l'axe horizontal.
Syntaxe
Valeurs
Note : Une valeur de type <length-percentage> est une valeur de type <length> ou une valeur de type <percentaqe>.
snapInterval( <length-percentage>, <length-percentage> )-
Cette forme permet d'indiquer la position d'un point d'accroche puis l'intervalle entre les points d'accroche.
- La première valeur indique l'emplacement du premier point d'accroche.
- La seconde valeur indique la distance entre chaque point d'accroche qui suit ou précède (c'est-à-dire à gauche et à droite du point d'accroche initial).
snapList( <length-percentage># )-
Cette forme permet d'indiquer l'ensemble des points d'accroche comme une liste de valeurs séparées par des virgules. Chaque valeur représente un facteur de zoom.
- Si la valeur est inférieure à
-ms-scroll-limit-x-min,-ms-scroll-limit-x-minsera utilisée. - Si la valeur est supérieure à
-ms-scroll-limit-x-max,-ms-scroll-limit-x-maxsera utilisée.
- Si la valeur est inférieure à
Syntaxe formelle
snapInterval( <length-percentage>, <length-percentage> ) | snapList( <length-percentage># )où
<length-percentage> = <length> | <percentage>
Exemples
Dans cet exemple, on illustre les deux types de valeurs possibles pour -ms-scroll-snap-points-x. Dans le premier sélecteur, le premier point d'accroche se situe à 0% et l'intervalle est défini à 100%. Dans le second sélecteur, chaque point d'accroche est défini séparément (à 100%, 200%, 300%, et ainsi de suite).
.container {
overflow-x: auto;
overflow-y: hidden;
-ms-scroll-snap-type: mandatory;
-ms-scroll-snap-points-x: snapInterval(0%, 100%);
width: 480px;
height: 270px;
}
.imageContainer {
-ms-scroll-chaining: chained;
-ms-overflow-style: none;
-ms-content-zooming: zoom;
-ms-scroll-rails: none;
-ms-scroll-limit-x-min: 100%;
-ms-scroll-limit-x-max: 500%;
-ms-scroll-snap-type: proximity;
-ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
-ms-overflow-style: none;
width: 480px;
height: 270px;
overflow: auto;
}
Spécifications
Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.
| Valeur initiale | snapInterval(0px, 100%) |
|---|---|
| Applicabilité | les éléments de bloc non remplacés et les éléments en bloc en ligne et en bloc (inline-block) |
| Héritée | non |
| Média | interactif |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |
| Ordre canonique | l'ordre unique et non-ambigu défini par la grammaire formelle |
Notes
Cette propriété est disponible à partir de Windows 8. Elle n'a aucun effet pour les éléments qui ne permettent pas d'utiliser un ascenseur.
À partir de Windows 8.1, cette propriété est également prise en charge pour les interactions à la souris, au clavier ou au pavé tactile.