scroll-snap-type

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.

La propriété scroll-snap-type définit la force d'adhérence aux points d'accroche en cas de défilement d'un conteneur.

La gestion précise des animations et de la physique pour respecter ces points d'accroche n'est pas décrite par cette propriété et est laissée à la discrétion de l'agent utilisateur.

Valeur initialenone
Applicabilitéconteneurs d'ascenseurs
Héritéenon
Médiainteractif
Valeur calculéecomme spécifié
Animablenon
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

/* Valeur avec un mot-clé */
scroll-snap-type: none;
scroll-snap-type: mandatory;
scroll-snap-type: proximity;

/* Valeurs globales */
scroll-snap-type: inherit;
scroll-snap-type: initial;
scroll-snap-type: unset;

Valeurs

none
Lorsque le viewport du conteneur défile, on ignore les points d'accroche.
mandatory
Le viewport visuel du conteneur 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. Si du contenu est ajouté, déplacé, supprimé ou redimensionné, le décalage induit doit être ajusté pour rester sur ce point d'accroche.
proximity
Le viewport visuel du conteneur 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. Si du contenu est ajouté, déplacé, supprimé ou redimensionne, le décalage induit peut être ajusté pour rester sur ce point d'accroche.

Syntaxe formelle

none | mandatory | proximity

Exemples

HTML

<div class="container mandatoryScrollSnapping">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<div class="container proximityScrollSnapping">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

CSS

.container {
  width: 100%;
  overflow: auto;
  white-space: nowrap;
  scroll-snap-points-x: repeat(100%);
  scroll-snap-type: mandatory;
  font-size: 0;
}

.mandatoryScrollSnapping {
  margin-bottom: 20px;
  scroll-snap-type: mandatory;
}

.proximityScrollSnapping {
  scroll-snap-type: proximity;
}

.container > div {
  width: 100%;
  height: 100px;
  display: inline-block;
  line-height: 100px;
  text-align: center;
  font-size: 50px;
}

.container > div:nth-child(even) {
  background-color: #87EA87;
}

.container > 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-type' 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) 10-ms- Pas de support 9-webkit-
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 9-webkit-

[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.

Étiquettes et contributeurs liés au document

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