diff options
Diffstat (limited to 'files/fr/web/css/scroll-snap-coordinate/index.html')
| -rw-r--r-- | files/fr/web/css/scroll-snap-coordinate/index.html | 157 |
1 files changed, 157 insertions, 0 deletions
diff --git a/files/fr/web/css/scroll-snap-coordinate/index.html b/files/fr/web/css/scroll-snap-coordinate/index.html new file mode 100644 index 0000000000..dbfa4f05c3 --- /dev/null +++ b/files/fr/web/css/scroll-snap-coordinate/index.html @@ -0,0 +1,157 @@ +--- +title: scroll-snap-coordinate +slug: Web/CSS/scroll-snap-coordinate +tags: + - CSS + - Déprécié + - Propriété + - Reference +translation_of: Web/CSS/scroll-snap-coordinate +--- +<div>{{CSSRef}}{{deprecated_header}}</div> + +<p>La propriété <strong> <code>scroll-snap-coordinate</code></strong> définit les coordonnées horizontale et verticale, au sein de l'élément, qui s'aligneront avec les points définis par {{cssxref("scroll-snap-destination")}} dans le conteneur le plus proche en termes de parenté.</p> + +<p>Si l'élément a été transformé, les coordonnées sont transformées de la même façon afin d'aligner le point d'accroche avec l'élément tel qu'il est affiché.</p> + +<pre class="brush: css no-line-numbers">/* Valeur avec un mot-clé */ +scroll-snap-coordinate: none; + +/* Valeurs de <position> */ +/* Une paire de coordonnées */ +scroll-snap-coordinate: 50px 50px; +/* Plusieurs coordonnées */ +scroll-snap-coordinate: 100px 100px, 100px bottom; + +/* Valeurs globales */ +scroll-snap-coordinate: inherit; +scroll-snap-coordinate: initial; +scroll-snap-coordinate: unset; +</pre> + +<h2 id="Syntaxe">Syntaxe</h2> + +<h3 id="Valeurs">Valeurs</h3> + +<dl> + <dt><code>none</code></dt> + <dd>L'élément ne contribue à aucun point d'accrochage.</dd> + <dt><code><position></code></dt> + <dd>Définit le décalage du point d'accrochage par rapport à la boîte de bordure le l'élément. Pour chaque paire, la première valeur indique l'abscisse et la seconde, l'ordonnée. Pour plus d'informations sur les valeurs possibles, voir {{cssxref("<position>")}}.</dd> +</dl> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div id="container"> + <div> + <p>Coordonnées (0, 0)</p> + <div class="scrollContainer coordinate0"> + <div>1</div> + <div>2</div> + <div>3</div> + </div> + </div> + + <div> + <p>Coordonnées (25, 0)</p> + <div class="scrollContainer coordinate25"> + <div>1</div> + <div>2</div> + <div>3</div> + </div> + </div> + + <div> + <p>Coordonnées (50, 0)</p> + <div class="scrollContainer coordinate50"> + <div>1</div> + <div>2</div> + <div>3</div> + </div> + </div> +</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">#container { + display: flex; +} + +#container > div:nth-child(-n+2) { + margin-right: 20px; +} + +.scrollContainer { + width: 100px; + overflow: auto; + white-space: nowrap; + scroll-snap-type: mandatory; + font-size: 0; +} + +.scrollContainer > div { + width: 100px; + height: 100px; + display: inline-block; + line-height: 100px; + text-align: center; + font-size: 50px; +} + +.coordinate0 > div { + scroll-snap-coordinate: 0 0; +} + +.coordinate25 > div { + scroll-snap-coordinate: 25px 0; +} + +.coordinate50 > div { + scroll-snap-coordinate: 50px 0; +} + +.scrollContainer > div:nth-child(even) { + background-color: #87ea87; +} + +.scrollContainer > div:nth-child(odd) { + background-color: #87ccea; +}</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples", "100%", "170")}}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-coordinate", "scroll-snap-coordinate")}}</td> + <td>{{Spec2("CSS Scroll Snap Points")}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("css.properties.scroll-snap-coordinate")}}</p> |