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.
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 initiale | none |
|---|---|
| Applicabilité | conteneurs d'ascenseurs |
| Héritée | non |
| Pourcentages | relatif au même axe de la padding-box du conteneur d'ascenceur |
| Média | interactif |
| Valeur calculée | comme spécifié, mais avec les longueurs relatives converties en longueurs absolues |
| Animable | non |
| Ordre canonique | l'ordre unique et non-ambigu défini par la grammaire formelle |
Syntaxe
/* 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;
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>)- 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.
Syntaxe formelle
none | repeat(<length>)
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é | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Support simple | Pas de support | 39.0 (39.0) | Pas de support | 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.