aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/css/scroll-behavior
diff options
context:
space:
mode:
Diffstat (limited to 'files/fr/web/css/scroll-behavior')
-rw-r--r--files/fr/web/css/scroll-behavior/index.md97
1 files changed, 40 insertions, 57 deletions
diff --git a/files/fr/web/css/scroll-behavior/index.md b/files/fr/web/css/scroll-behavior/index.md
index 486f6a44f5..8e904df117 100644
--- a/files/fr/web/css/scroll-behavior/index.md
+++ b/files/fr/web/css/scroll-behavior/index.md
@@ -1,22 +1,18 @@
---
title: scroll-behavior
slug: Web/CSS/scroll-behavior
-tags:
- - CSS
- - CSSOM
- - Propriété
- - Reference
translation_of: Web/CSS/scroll-behavior
+browser-compat: css.properties.scroll-behavior
---
{{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.
-
-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_).
+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.
{{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_).
+Pour les autres défilements, tels que ceux 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 (<i lang="en">viewport</i>). Lorsque cette propriété est indiquée sur l'élément `body`, elle *ne se propage pas* à la zone d'affichage (<i lang="en">viewport</i>).
+
+Les agents utilisateur peuvent choisir d'ignorer cette propriété.
## Syntaxe
@@ -28,6 +24,7 @@ scroll-behavior: smooth;
/* Valeurs globales */
scroll-behavior: inherit;
scroll-behavior: initial;
+scroll-behavior: revert;
scroll-behavior: unset;
```
@@ -38,40 +35,63 @@ La propriété `scroll-behavior` est définie avec l'un des mots-clés suivants.
- `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.
+ - : 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 plateforme s'il y en a.
+
+## Définition formelle
-### Syntaxe formelle
+{{CSSInfo}}
+
+## Syntaxe formelle
{{csssyntax}}
## Exemples
-### CSS
+### Définition d'un défilement doux
+
+#### HTML
+```html
+<nav>
+ <a href="#page-1">1</a>
+ <a href="#page-2">2</a>
+ <a href="#page-3">3</a>
+</nav>
+<div class="scroll-container">
+ <div class="scroll-page" id="page-1">1</div>
+ <div class="scroll-page" id="page-2">2</div>
+ <div class="scroll-page" id="page-3">3</div>
+</div>
+```
+
+#### CSS
```css
a {
display: inline-block;
width: 50px;
text-decoration: none;
}
-nav, scroll-container {
+
+nav, .scroll-container {
display: block;
margin: 0 auto;
text-align: center;
}
+
nav {
width: 339px;
padding: 5px;
border: 1px solid black;
}
-scroll-container {
- display: block;
+
+.scroll-container {
width: 350px;
height: 200px;
overflow-y: scroll;
scroll-behavior: smooth;
}
-scroll-page {
+
+.scroll-page {
display: flex;
align-items: center;
justify-content: center;
@@ -80,51 +100,14 @@ scroll-page {
}
```
-### 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>
-```
-
-### Résultat
-
-{{EmbedLiveSample("Exemples", "100%", 250)}}
-
-## Accessibilité
+#### Résultat
-[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 :
-
-```css
-html {
- scroll-behavior: smooth;
-}
-
-@media (prefers-reduced-motion: reduce) {
- html {
- scroll-behavior: auto;
- }
-}
-```
+{{EmbedLiveSample("", "100%", 250)}}
## Spécifications
-| Spécification | État | Commentaires |
-| ------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
-| {{SpecName('CSSOM View', "#propdef-scroll-behavior", 'scroll-behavior')}} | {{Spec2('CSSOM View')}} | Définition initiale. |
-
-{{cssinfo}}
+{{Specifications}}
## Compatibilité des navigateurs
-{{Compat("css.properties.scroll-behavior")}}
+{{Compat}}