diff options
Diffstat (limited to 'files/fr/web/css/scroll-snap-stop/index.md')
| -rw-r--r-- | files/fr/web/css/scroll-snap-stop/index.md | 230 |
1 files changed, 109 insertions, 121 deletions
diff --git a/files/fr/web/css/scroll-snap-stop/index.md b/files/fr/web/css/scroll-snap-stop/index.md index 68a536bdf0..59d4722096 100644 --- a/files/fr/web/css/scroll-snap-stop/index.md +++ b/files/fr/web/css/scroll-snap-stop/index.md @@ -7,11 +7,12 @@ tags: - Reference translation_of: Web/CSS/scroll-snap-stop --- -<div>{{CSSRef}}{{SeeCompatTable}}</div> +{{CSSRef}}{{SeeCompatTable}} -<p>La propriété <strong><code>scroll-snap-stop</code></strong> définit la façon dont un conteneur de défilement peut « passer outre » certaines positions d'accroche.</p> +La propriété **`scroll-snap-stop`** définit la façon dont un conteneur de défilement peut « passer outre » certaines positions d'accroche. -<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */ +```css +/* Valeurs avec un mot-clé */ scroll-snap-stop: normal; scroll-snap-stop: always; @@ -19,28 +20,27 @@ scroll-snap-stop: always; scroll-snap-type: inherit; scroll-snap-type: initial; scroll-snap-type: unset; -</pre> +``` -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<h3 id="Valeurs">Valeurs</h3> +### Valeurs -<dl> - <dt><code>normal</code></dt> - <dd>Lorsque la zone d'affichage ({{Glossary("viewport")}}) du conteneur défile, elle peut passer sur certaines positions d'accroche.</dd> - <dt><code>always</code></dt> - <dd>Le conteneur de défilement ne peut pas passer sur une position d'accroche. Le conteneur doit « s'accrocher » dès la première position d'accroche de l'élément.</dd> -</dl> +- `normal` + - : Lorsque la zone d'affichage ({{Glossary("viewport")}}) du conteneur défile, elle peut passer sur certaines positions d'accroche. +- `always` + - : Le conteneur de défilement ne peut pas passer sur une position d'accroche. Le conteneur doit « s'accrocher » dès la première position d'accroche de l'élément. -<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> +### Syntaxe formelle {{csssyntax}} -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="CSS">CSS</h3> +### CSS -<pre class="brush: css">/* setup */ +```css +/* setup */ :root, body { height: 100%; display: flex; @@ -68,10 +68,10 @@ scroll-snap-type: unset; flex-flow: column nowrap; } /* definite scroll snap */ -.mandatory-scroll-snapping > div { +.mandatory-scroll-snapping > div { scroll-snap-stop: always; } -.proximity-scroll-snapping > div { +.proximity-scroll-snapping > div { scroll-snap-stop: normal; } /* scroll-snap */ @@ -91,132 +91,120 @@ scroll-snap-type: unset; scroll-snap-type: y proximity; } -.container > div { +.container > div { text-align: center; scroll-snap-align: center; flex: none; } -.x.container > div { +.x.container > div { line-height: 128px; font-size: 64px; width: 100%; height: 128px; } -.y.container > div { +.y.container > div { line-height: 256px; font-size: 128px; width: 256px; height: 256px; } /* appearance fixes */ -.y.container > div:first-child { +.y.container > div:first-child { line-height: 1.3; font-size: 64px; } /* coloration */ -.container > div:nth-child(even) { +.container > div:nth-child(even) { background-color: #87EA87; } -.container > div:nth-child(odd) { +.container > div:nth-child(odd) { background-color: #87CCEA; } -</pre> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><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 Proximity 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 Mandatory 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 Proximity 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> -</pre> - -<h3 id="Résultat">Résultat</h3> - -<p>{{EmbedLiveSample("Exemples", "100%", "1630")}}</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-stop", "scroll-snap-stop")}}</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> - -<p>{{Compat("css.properties.scroll-snap-stop")}}</p> +``` + +### HTML + +```html +<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 Proximity 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 Mandatory 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 Proximity 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> +``` + +### Résultat + +{{EmbedLiveSample("Exemples", "100%", "1630")}} + +## Spécifications + +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------- | +| {{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-stop", "scroll-snap-stop")}} | {{Spec2("CSS Scroll Snap Points")}} | Définition initiale. | + +{{cssinfo}} + +## Compatibilité des navigateurs + +{{Compat("css.properties.scroll-snap-stop")}} |