From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/fr/web/css/scroll-snap-points-x/index.html | 94 ++++++++++++++++++++++++ 1 file changed, 94 insertions(+) create mode 100644 files/fr/web/css/scroll-snap-points-x/index.html (limited to 'files/fr/web/css/scroll-snap-points-x') diff --git a/files/fr/web/css/scroll-snap-points-x/index.html b/files/fr/web/css/scroll-snap-points-x/index.html new file mode 100644 index 0000000000..b7f1acea8b --- /dev/null +++ b/files/fr/web/css/scroll-snap-points-x/index.html @@ -0,0 +1,94 @@ +--- +title: scroll-snap-points-x +slug: Web/CSS/scroll-snap-points-x +tags: + - CSS + - Déprécié + - Propriété + - Reference +translation_of: Web/CSS/scroll-snap-points-x +--- +
{{CSSRef}}{{deprecated_header}}
+ +

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;
+
+ +

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

+ +
{{csssyntax}}
+ +

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

+ +

{{EmbedLiveSample("Exemples", 220, 220)}}

+ +

Spécifications

+ +

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.

+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.scroll-snap-points-x")}}

-- cgit v1.2.3-54-g00ecf