-ms-scroll-snap-points-x

This is an archived page. It's not actively maintained.

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.

Syntaxe formelle

snapInterval( <length-percentage>, <length-percentage> ) | snapList( <length-percentage># )


<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 initialesnapInterval(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éenon
Médiainteractif
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniquel'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.