diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/fr/web/css/scroll-behavior | |
parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip |
initial commit
Diffstat (limited to 'files/fr/web/css/scroll-behavior')
-rw-r--r-- | files/fr/web/css/scroll-behavior/index.html | 143 |
1 files changed, 143 insertions, 0 deletions
diff --git a/files/fr/web/css/scroll-behavior/index.html b/files/fr/web/css/scroll-behavior/index.html new file mode 100644 index 0000000000..75791bd495 --- /dev/null +++ b/files/fr/web/css/scroll-behavior/index.html @@ -0,0 +1,143 @@ +--- +title: scroll-behavior +slug: Web/CSS/scroll-behavior +tags: + - CSS + - CSSOM + - Propriété + - Reference +translation_of: Web/CSS/scroll-behavior +--- +<div>{{CSSRef}}</div> + +<p>La propriété<strong> <code>scroll-behavior</code></strong> 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.</p> + +<p>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 (<em>viewport</em>).</p> + +<div>{{EmbedInteractiveExample("pages/css/scroll-behavior.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<p>Les agents utilisateur peuvent choisir d'ignorer cette propriété. Lorsque cette propriété est indiquée sur l'élément <code>body</code>, elle ne se propage pas à la zone d'affichage (<em>viewport</em>).</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */ +scroll-behavior: auto; +scroll-behavior: smooth; + +/* Valeurs globales */ +scroll-behavior: inherit; +scroll-behavior: initial; +scroll-behavior: unset; +</pre> + +<p>La propriété <code>scroll-behavior</code> est définie avec l'un des mots-clés suivants.</p> + +<h3 id="Valeurs">Valeurs</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>La boîte de défilement progresse de façon instantanée.</dd> + <dt><code>smooth</code></dt> + <dd>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.</dd> +</dl> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">a { + display: inline-block; + width: 50px; + text-decoration: none; +} +nav, scroll-container { + display: block; + margin: 0 auto; + text-align: center; +} +nav { + width: 339px; + padding: 5px; + border: 1px solid black; +} +scroll-container { + display: block; + width: 350px; + height: 200px; + overflow-y: scroll; + scroll-behavior: smooth; +} +scroll-page { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + font-size: 5em; +} +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: 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></pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples", "100%", 250)}}</p> + +<h2 id="Accessibilité">Accessibilité</h2> + +<p><a href="https://fr.wikipedia.org/wiki/Syst%C3%A8me_vestibulaire">Les troubles du système vestibulaires</a> 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.</p> + +<p>En utilisant la caractéristique média <code>prefers-reduced-motion</code>, 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 :</p> + +<pre class="brush: css">html { + scroll-behavior: smooth; +} + +@media (prefers-reduced-motion: reduce) { + html { + scroll-behavior: auto; + } +}</pre> + +<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('CSSOM View', "#propdef-scroll-behavior", 'scroll-behavior')}}</td> + <td>{{Spec2('CSSOM View')}}</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-behavior")}}</p> |