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 avec un mot-clé */
scroll-snap-type: none;
scroll-snap-type: x;
scroll-snap-type: y;
scroll-snap-type: block;
scroll-snap-type: inline;
scroll-snap-type: both;

/* Ajout du mot-clé optionnel mandatory ou proximity*/
scroll-snap-type: x mandatory;
scroll-snap-type: y proximity;
scroll-snap-type: both mandatory;
/* etc. */

/* Valeurs globales */
scroll-snap-type: inherit;
scroll-snap-type: initial;
scroll-snap-type: unset;
Valeur initialenone
Applicabilitétous les éléments
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

Syntaxe

Valeurs

none
Lorsque le viewport du conteneur défile, on ignore les points d'accroche.
x
Le conteneur qui défile s'accroche aux positions sur l'axe horizontal uniquement.
y
Le conteneur qui défile s'accroche aux positions sur l'axe vertical uniquement.
block
Le conteneur qui défile s'accroche aux positions sur l'axe de bloc (celui orthogonal à l'axe de lecture) uniquement.
inline
Le conteneur qui défile s'accroche aux positions sur l'axe en ligne (correspondant à au sens de lecteure) uniquement.
both
Le conteneur qui défile s'accroche aux positions sur les deux axes de façon indépendante.
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 | [ x | y | block | inline | both ] [ mandatory | proximity ]

Exemples

CSS

/* setup */
html, body, .holster {
  height: 100%;
}
.holster {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-flow: column nowrap;
  font-family: monospace;
}

.container {
  display: flex;
  overflow: auto;
  outline: 1px dashed lightgray;
  flex: none;
}

.container.x {
  width: 100%;
  height: 128px;
  flex-flow: row nowrap;
}

.container.y {
  width: 256px;
  height: 256px;
  flex-flow: column nowrap;
}
/* scroll-snap */
.x.mandatory-scroll-snapping {
  scroll-snap-type: x mandatory;
}

.y.mandatory-scroll-snapping {
  scroll-snap-type: y mandatory;
}

.x.proximity-scroll-snapping {
  scroll-snap-type: x proximity;
}

.y.proximity-scroll-snapping {
  scroll-snap-type: y proximity;
}

.container > div {
  text-align: center;
  scroll-snap-align: center;
  flex: none;
}

.x.container > div {
  line-height: 128px;
  font-size: 64px;
  width: 100%;
  height: 128px;
}

.y.container > div {
  line-height: 256px;
  font-size: 128px;
  width: 256px;
  height: 256px;
}
/* appearance fixes */
.y.container > div:first-child {
  line-height: 1.3;
  font-size: 64px;
}
/* coloration */
.container > div:nth-child(even) {
  background-color: #87EA87;
}

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

HTML

<div class="holster">
<div class="container x mandatory-scroll-snapping" dir="ltr">
  <div>X Mand. LTR</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<div class="container x proximity-scroll-snapping" dir="ltr">
  <div>X Prox. LTR</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<div class="container y mandatory-scroll-snapping" dir="ltr">
  <div>Y Mand. LTR</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<div class="container y proximity-scroll-snapping" dir="ltr">
  <div>Y Prox. LTR</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<div class="container x mandatory-scroll-snapping" dir="rtl">
  <div>X Mand. RTL</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<div class="container x proximity-scroll-snapping" dir="rtl">
  <div>X Prox. RTL</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<div class="container y mandatory-scroll-snapping" dir="rtl">
  <div>Y Mand. RTL</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<div class="container y proximity-scroll-snapping" dir="rtl">
  <div>Y Prox. RTL</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>
</div>

Résultat

Spécifications

Spécification État Commentaires
CSS Scroll Snap Module Level 1
La définition de 'scroll-snap-type' dans cette spécification.
Candidat au statut de recommandation Définition initiale.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simpleChrome Support complet 69Edge Support complet 12
Préfixée Notes
Support complet 12
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -ms-
Notes Edge supports an earlier draft of CSS Scroll Snap without axis values.
Firefox Support complet 39
Notes
Support complet 39
Notes
Notes Firefox supports an earlier draft of CSS Scroll Snap without axis values.
IE Support complet 10
Préfixée Notes
Support complet 10
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -ms-
Notes Internet Explorer supports an earlier draft of CSS Scroll Snap without axis values.
Opera Support complet 56Safari Support complet 11
Support complet 11
Support complet 9
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes Older Safari versions support an earlier draft of CSS Scroll Snap without axis values.
WebView Android Support complet 69Chrome Android Support complet 69Edge Mobile Support complet 12
Préfixée Notes
Support complet 12
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -ms-
Notes Edge supports an earlier draft of CSS Scroll Snap without axis values.
Firefox Android Support complet 46
Notes
Support complet 46
Notes
Notes Firefox supports an earlier draft of CSS Scroll Snap without axis values.
Support complet 39
Désactivée
Désactivée From version 39: this feature is behind the layout.css.scroll-snap.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Support complet 56Safari iOS Support complet 11
Support complet 11
Support complet 9
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes Older Safari versions support an earlier draft of CSS Scroll Snap without axis values.
Samsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Étiquettes et contributeurs liés au document

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