scroll-snap-type CSS propriété

Définition de la CSS scroll-snap-type.

La propriété CSS scroll-snap-type permet de spécifier la manière dont s'accroche le défilement d'une boîte de défilement.

Exemple de syntaxe CSS scroll-snap-type :

/* Spécifications Mars 2015 */
scroll-snap-type : none;
scroll-snap-type : proximity;
scroll-snap-type : mandatory;
/* Spécifications Juin 2016 */
scroll-snap-type : y mandatory;
scroll-snap-type : x proximity;
scroll-snap-type : inline mandatory;
scroll-snap-type : both;

La propriété de feuille de style scroll-snap-type CSS peut pendre comme première valeur (2016):

y : la boîte de défilement s'accroche aux positions sur l'axe vertical uniquement.
x : la boîte de défilement s'accroche aux positions sur l'axe horizontal uniquement.
inline : la boîte de défilement s'accroche aux positions sur l'axe en ligne uniquement.
block : la boîte de défilement s'accroche aux positions sur l'axe de bloc uniquement.
both : la boîte de défilement s'accroche aux positions sur tous les axes possible.

La propriété de feuille de style scroll-snap-type CSS peut pendre comme seconde valeur :

none : valeur seule, la boîte de défilement ne s'accroche à aucune position. Valeur par défaut.
proximity : la boîte de défilement peut s'accrocher à un point d'accroche si aucun défilement n'est en cours, selon les paramètres de défilement de l'agent utilisateur. Valeur par défaut, si la seconde valeur est omise.
mandatory : la boîte de défilement doit s'arrêter sur les points d'accroche s'il n'est pas en cours de défilement. Cela signifie qu'il accroche sur ce point quand le défilement s'arrête.

Exemple de code scroll-snap-type CSS

Conditions d'application de la CSS scroll-snap-type.

La propriété de feuille de style scroll-snap-type CSS est applicable sur l'ensemble des balises HTML ou XHTML si cette dernière est une boîte de défilement d'éléments (overflow). Il faut aussi que la propriété CSS scroll-snap-type soit précisée sur les fils.

Héritage des valeurs Css de scroll-snap-type.

Les balises filles HTML ou XHTML n'héritent pas de la propriété Css scroll-snap-type.

Conditions d'animation de scroll-snap-type en CSS3.

La CSS scroll-snap-type est une propriété de feuille de style qui peut être utilisée pour les animations CSS et transitions CSS.

Règles de syntaxes CSS pour scroll-snap-type.

L'axe en ligne et de bloc

L'axe en ligne correspond au sens de l'écriture. Il est influencé par la propriété Css writing-mode.
L'axe de bloc est l'axe orthogonal à l'axe en ligne.

Compatibilités navigateurs de la propriété scroll-snap-type

Détails des versions de la CSS scroll-snap-type: Propriété scroll-snap-type est compatible avec CSS4 et plus.

Résumé du support navigateurs de la CSS scroll-snap-type: Propriété CSS scroll-snap-type est compatible à partir de Chrome 68; Propriété CSS scroll-snap-type est compatible sous une forme préfixée avec Firefox 39; Propriété CSS scroll-snap-type est compatible à partir de Firefox 68; Propriété CSS scroll-snap-type est compatible sous une forme préfixée à partir de Internet Explorer 10; Propriété CSS scroll-snap-type est compatible à partir de Internet Explorer ou Edge 79; Propriété CSS scroll-snap-type est compatible à partir de Opera 56; Propriété CSS scroll-snap-type est compatible sous une forme préfixée avec Safari 9; Propriété CSS scroll-snap-type est compatible à partir de Safari 11; Propriété CSS scroll-snap-type est compatible à partir de Chrome Android 69; Propriété CSS scroll-snap-type est compatible à partir de Firefox Android 68; Propriété CSS scroll-snap-type est compatible sous une forme préfixée avec iOS Safari 9; Propriété CSS scroll-snap-type est compatible à partir de iOS Safari 11

Propriétés CSS préfixées de scroll-snap-type

Vous trouverez ci-dessous les propriétés CSS préfixées équivalentes à la propriété scroll-snap-type CSS :

Pour faire en sorte que la propriété CSS scroll-snap-type soit compatible avec le maximum de navigateurs vous devez mettre de propriétés préfixées et tenir compte de la spécification de 2015 et de 2016.

Exemple de code scroll snap horizontal :

.boite-scrollable{
/* compatibilité Old Spec. 2015*/
  -webkit-scroll-snap-destination: 0 0; /* Unité px, coordonnées X et Y*/
  -webkit-scroll-snap-points-x: repeat(100%); /* Valeurs : none ou repeat(longueur) */
  -ms-scroll-snap-destination: 0 0;
  -ms-scroll-snap-points-x: repeat(100%);
  scroll-snap-destination: 0 0;
  scroll-snap-points-x: repeat(100%);
  -webkit-scroll-snap-type: mandatory;
  -ms-scroll-snap-type: mandatory;
  scroll-snap-type: mandatory;
  
/* New Spec. */
  scroll-snap-type: x mandatory; 
}

Exemple de code scroll snap vertical :

.boite-scrollable{
/* compatibilité Old Spec. 2015*/
  -webkit-scroll-snap-destination: 0 0; /* Unité px, coordonnées X et Y*/
  -webkit-scroll-snap-points-y: repeat(100%); /* Valeurs : none ou repeat(longueur) */
  -ms-scroll-snap-destination: 0 0;
  -ms-scroll-snap-points-y: repeat(100%);
  scroll-snap-destination: 0 0;
  scroll-snap-points-y: repeat(100%);
  -webkit-scroll-snap-type: mandatory; /* Valeurs : none ou mandatory ou proximity */
  -ms-scroll-snap-type: mandatory; 
  scroll-snap-type: mandatory;
  
/* New Spec. */
  scroll-snap-type: y mandatory;
}

Equivalence de la CSS scroll-snap-type en HTML.

La propriété CSS scroll-snap-type n'a pas d'équivalence en HTML ou XHTML.

Votre avis sur la définition scroll-snap-type en CSS

Votez pour la définition CSS `scroll-snap-type`

Votes: 5 / 5 - 1 vote
Cliquez sur une étoile pour voter.