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-behavior/index.md | 119 ++++++++++++++---------------- 1 file changed, 55 insertions(+), 64 deletions(-) (limited to 'files/fr/web/css/scroll-behavior') diff --git a/files/fr/web/css/scroll-behavior/index.md b/files/fr/web/css/scroll-behavior/index.md index b36cc1c52b..486f6a44f5 100644 --- a/files/fr/web/css/scroll-behavior/index.md +++ b/files/fr/web/css/scroll-behavior/index.md @@ -8,19 +8,20 @@ tags: - Reference translation_of: Web/CSS/scroll-behavior --- -
{{CSSRef}}
+{{CSSRef}} -

La propriété scroll-behavior définit le comportement du défilement pour une boîte de défilement lorsque celui-ci provient de la navigation ou des API CSSOM.

+La propriété** `scroll-behavior`** définit le comportement du défilement pour une boîte de défilement lorsque celui-ci provient de la navigation ou des API CSSOM. -

Pour les autres défilements, appliqués par l'utilisateur, cette propriété n'a aucun impact. Lorsque cette propriété est définie sur l'élément racine, elle s'applique à la zone d'affichage (viewport).

+Pour les autres défilements, appliqués par l'utilisateur, cette propriété n'a aucun impact. Lorsque cette propriété est définie sur l'élément racine, elle s'applique à la zone d'affichage (_viewport_). -
{{EmbedInteractiveExample("pages/css/scroll-behavior.html")}}
+{{EmbedInteractiveExample("pages/css/scroll-behavior.html")}} -

Les agents utilisateur peuvent choisir d'ignorer cette propriété. Lorsque cette propriété est indiquée sur l'élément body, elle ne se propage pas à la zone d'affichage (viewport).

+Les agents utilisateur peuvent choisir d'ignorer cette propriété. Lorsque cette propriété est indiquée sur l'élément `body`, elle ne se propage pas à la zone d'affichage (_viewport_). -

Syntaxe

+## Syntaxe -
/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 scroll-behavior: auto;
 scroll-behavior: smooth;
 
@@ -28,28 +29,27 @@ scroll-behavior: smooth;
 scroll-behavior: inherit;
 scroll-behavior: initial;
 scroll-behavior: unset;
-
+``` -

La propriété scroll-behavior est définie avec l'un des mots-clés suivants.

+La propriété `scroll-behavior` est définie avec l'un des mots-clés suivants. -

Valeurs

+### Valeurs -
-
auto
-
La boîte de défilement progresse de façon instantanée.
-
smooth
-
Le défilement est doux et utilise une fonction de minutage définie par l'agent utilisateur pendant une période définie par l'agent utilisateur. Les agents utilisateur doivent respecter les conventions de la plate-forme s'il y en a.
-
+- `auto` + - : La boîte de défilement progresse de façon instantanée. +- `smooth` + - : Le défilement est doux et utilise une fonction de minutage définie par l'agent utilisateur pendant une période définie par l'agent utilisateur. Les agents utilisateur doivent respecter les conventions de la plate-forme s'il y en a. -

Syntaxe formelle

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

Exemples

+## Exemples -

CSS

+### CSS -
a {
+```css
+a {
   display: inline-block;
   width: 50px;
   text-decoration: none;
@@ -78,32 +78,35 @@ scroll-page {
   height: 100%;
   font-size: 5em;
 }
-
+``` -

HTML

+### HTML -
<nav>
-  <a href="#page-1">1</a>
-  <a href="#page-2">2</a>
-  <a href="#page-3">3</a>
-</nav>
-<scroll-container>
-  <scroll-page id="page-1">1</scroll-page>
-  <scroll-page id="page-2">2</scroll-page>
-  <scroll-page id="page-3">3</scroll-page>
-</scroll-container>
+```html + + + 1 + 2 + 3 + +``` -

Résultat

+### Résultat -

{{EmbedLiveSample("Exemples", "100%", 250)}}

+{{EmbedLiveSample("Exemples", "100%", 250)}} -

Accessibilité

+## Accessibilité -

Les troubles du système vestibulaires peuvent être causés par la maladie, l'âge ou des blessures. Ces troubles entraînent des vertiges, fatigues et nausées suite aux mouvements.

+[Les troubles du système vestibulaires](https://fr.wikipedia.org/wiki/Syst%C3%A8me_vestibulaire) peuvent être causés par la maladie, l'âge ou des blessures. Ces troubles entraînent des vertiges, fatigues et nausées suite aux mouvements. -

En utilisant la caractéristique média prefers-reduced-motion, on peut désactiver le défilement instantanné pour les utilisateurs qui ont paramétré leur système/navigateur afin de réduire les animations et mouvements :

+En utilisant la caractéristique média `prefers-reduced-motion`, on peut désactiver le défilement instantanné pour les utilisateurs qui ont paramétré leur système/navigateur afin de réduire les animations et mouvements : -
html {
+```css
+html {
   scroll-behavior: smooth;
 }
 
@@ -111,29 +114,17 @@ scroll-page {
   html {
     scroll-behavior: auto;
   }
-}
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSSOM View', "#propdef-scroll-behavior", 'scroll-behavior')}}{{Spec2('CSSOM View')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.scroll-behavior")}}

+} +``` + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- | +| {{SpecName('CSSOM View', "#propdef-scroll-behavior", 'scroll-behavior')}} | {{Spec2('CSSOM View')}} | Définition initiale. | + +{{cssinfo}} + +## Compatibilité des navigateurs + +{{Compat("css.properties.scroll-behavior")}} -- cgit v1.2.3-54-g00ecf