We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

-ms-scroll-snap-points-x

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.

Étiquettes et contributeurs liés au document

Contributeurs à cette page : SphinxKnight
Dernière mise à jour par : SphinxKnight,