Obsolète
Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.

La propriété scroll-snap-points-x définit le positionnement horizontal des points d'accroche dans le conteneur de défilement auquel ils s'appliquent.

/* Valeur avec un mot-clé */
scroll-snap-points-x: none;

/* Répétition des points d'accroche */
scroll-snap-points-x: repeat(400px);

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

Valeur initialenone
Applicabilitéconteneurs d'ascenseurs
Héritéenon
Pourcentagesrelatif au même axe de la padding-box du conteneur d'ascenceur
Médiainteractif
Valeur calculéecomme spécifié, mais avec les longueurs relatives converties en longueurs absolues
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

Valeurs

none
Le conteneur ne possède pas de points d'accroche. Les éléments contenus à l'intérieur peuvent définir leurs propres points d'accroche.
repeat(<length-percentage>)
Cette valeur permet de définir un intervalle de répétition pour les points d'accroche, en commençant par le bord (pertinent) du conteneur. Seules les longueurs positives sont autorisées. Les pourcentages sont relatifs à la largeur du conteneur.

Syntaxe formelle

none | repeat( <length-percentage> )


<length-percentage> = <length> | <percentage>

Exemples

HTML

<div id="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

CSS

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

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

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

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

Résultat

Spécification

Cette propriété avait été définie dans un brouillon de spécification pour le module CSS sur les points d'accroche mais a ensuite été retirée de la spécification pour être remplacée par l'accroche basée sur les éléments.

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple Non Non39 Non Non9 -webkit-
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple Non ? Non

46

391

Non9 -webkit- Non

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

Étiquettes et contributeurs liés au document

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