From 258ba7b4be62d8640477a3bd3146d08b00cb70ec Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:59:20 +0200 Subject: convert content to md --- files/fr/web/css/scroll-snap-stop/index.md | 230 ++++++++++++++--------------- 1 file changed, 109 insertions(+), 121 deletions(-) (limited to 'files/fr/web/css/scroll-snap-stop') 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 --- -
{{CSSRef}}{{SeeCompatTable}}
+{{CSSRef}}{{SeeCompatTable}} -

La propriété scroll-snap-stop définit la façon dont un conteneur de défilement peut « passer outre » certaines positions d'accroche.

+La propriété **`scroll-snap-stop`** définit la façon dont un conteneur de défilement peut « passer outre » certaines positions d'accroche. -
/* 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;
-
+``` -

Syntaxe

+## Syntaxe -

Valeurs

+### Valeurs -
-
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.
-
+- `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. -

Syntaxe formelle

+### Syntaxe formelle {{csssyntax}} -

Exemples

+## Exemples -

CSS

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

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ÉtatCommentaires
{{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")}}

+``` + +### HTML + +```html +
+
X Mand. LTR
+
2
+
3
+
4
+
5
+
+ +
+
X Proximity LTR
+
2
+
3
+
4
+
5
+
+ +
+
Y Mand. LTR
+
2
+
3
+
4
+
5
+
+ +
+
Y Prox. LTR
+
2
+
3
+
4
+
5
+
+ +
+
X Mandatory RTL
+
2
+
3
+
4
+
5
+
+ +
+
X Proximity RTL
+
2
+
3
+
4
+
5
+
+ +
+
Y Mand. RTL
+
2
+
3
+
4
+
5
+
+ +
+
Y Prox. RTL
+
2
+
3
+
4
+
5
+
+``` + +### 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")}} -- cgit v1.2.3-54-g00ecf