files/fr/web/css/scrollbar-width/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119

---
title: scrollbar-width
slug: Web/CSS/scrollbar-width
tags:
  - CSS
  - Propriété
  - Reference
translation_of: Web/CSS/scrollbar-width
---
<div>{{CSSRef}}{{SeeCompatTable}}</div>

<p>La propriété <strong><code>scrollbar-width</code></strong> permet à un auteur de définir l'épaisseur maximale à utiliser pour la barre de défilement si celle-ci est affichée.</p>

<p>{{EmbedInteractiveExample("pages/css/scrollbar-width.html")}}</p>

<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à 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>


<h2 id="Syntaxe">Syntaxe</h2>

<pre class="brush: css">/* Valeurs avec un mot-clé */
scrollbar-width: auto;
scrollbar-width: thin;
scrollbar-width: none;

/* Valeurs globales */
scrollbar-width: inherit;
scrollbar-width: initial;
scrollbar-width: unset;
</pre>

<h3 id="Valeurs">Valeurs</h3>

<dl>
 <dt><code>&lt;scrollbar-width&gt;</code></dt>
 <dd>Une valeur qui définit l'épaisseur de la barre de défilement. Cette valeur est une longueur (cf. {{cssxref("&lt;length&gt;")}}) positive ou bien un mot-clé. Si c'est un mot-clé, ce dernier doit avoir l'une des valeurs suivantes :
 <table class="standard-table">
  <tbody>
   <tr>
    <td><code>auto</code></td>
    <td>La largeur par défaut, fournie par le système, pour la barre de défilement.</td>
   </tr>
   <tr>
    <td><code>thin</code></td>
    <td>Une variante plus fine de la barre de défilement plus fine dans le cas des plateformes qui fournissent une telle option ou une barre de défilement avec une largeur moindre que la largeur par défaut du système.</td>
   </tr>
   <tr>
    <td><code>none</code></td>
    <td>Aucune barre de défilement n'est affichée mais on peut toujours faire défiler l'élément.</td>
   </tr>
  </tbody>
 </table>

 <div class="note">
 <p><strong>Note :</strong> Toute valeur de <code>scrollbar-width</code> doit être appliquée sur l'élément racine de la zone d'affichage (<em>viewport</em>) par les agents utilisateur.</p>
 </div>

 <div class="note">
 <p><strong>Note :</strong> L'utilisation des longueurs pour <code>scrollbar-width</code> est une fonctionnalité qui sera potentiellement abandonnée de la spécification (voir <a href="https://github.com/w3c/csswg-drafts/issues/1958">l'<em>issue</em> 1958</a>).</p>
 </div>
 </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">.scroller {
  width: 300px;
  height: 100px;
  overflow-y: scroll;
  scrollbar-width: thin;
}</pre>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;div class="scroller"&gt;Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.&lt;/div&gt;</pre>

<h3 id="Résultat">Résultat</h3>

<p>{{EmbedLiveSample("Exemples")}}</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 Scrollbars", "#scrollbar-width", "scrollbar-width")}}</td>
   <td>{{Spec2("CSS Scrollbars")}}</td>
   <td>Définition initiale.</td>
  </tr>
 </tbody>
</table>

<p>{{cssinfo}}</p>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>

<p>{{Compat("css.properties.scrollbar-width")}}</p>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li>{{CSSxRef("-ms-overflow-style")}}</li>
 <li>{{CSSxRef("::-webkit-scrollbar")}}</li>
</ul>