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
120
121
122
123
|
---
title: '::-webkit-scrollbar'
slug: 'Web/CSS/::-webkit-scrollbar'
tags:
- CSS
- Non-standard
- Pseudo-element
- Reference
translation_of: 'Web/CSS/::-webkit-scrollbar'
---
<div>{{Draft}}{{CSSRef}}{{Non-standard_header}}</div>
<div>Le pseudo-élément <code><strong>::-webkit-scrollbar</strong></code> permet de modifier le style de la barre de défilement associée à un élément. Il s'agit d'un pseudo-élément propriétaire, uniquement disponible pour les navigateurs WebKit.</div>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="syntaxbox">{{CSSSyntax}}
</pre>
<h2 id="Sélecteurs_de_scrollbars">Sélecteurs de <em>scrollbars</em></h2>
<p>You can use the following pseudo elements to customize various parts of the scrollbar for webkit browsers:</p>
<ul>
<li><code>::-webkit-scrollbar</code> — la barre entière.</li>
<li><code>::-webkit-scrollbar-button</code> — les boutons de la barre de défilement (les flèches vers le bas ou le haut)</li>
<li><code>::-webkit-scrollbar-thumb</code> — l'emplacement qui permet de déplacer la barre de défilement.</li>
<li><code>::-webkit-scrollbar-track</code> — la piste (la zone de progression) de la barre de défilement</li>
<li><code>::-webkit-scrollbar-track-piece</code> — la partie de la piste qui n'est pas couverte par le bouton de la barre de défilement.</li>
<li><code>::-webkit-scrollbar-corner</code> — le coin inférieur de la barre où les barres horizontales et verticales se rencontrent.</li>
<li><code>::-webkit-resizer</code> — le bouton qui apparaît dans le coin inférieur de certains éléments et qui permet de les redimensionner.</li>
</ul>
<h2 id="Exemples">Exemples</h2>
<pre class="brush: css">.visible-scrollbar, .invisible-scrollbar, .mostly-customized-scrollbar {
display: block;
width: 10em;
overflow: auto;
height: 2em;
}
.invisible-scrollbar::-webkit-scrollbar {
display: none;
}
/* Demonstrate a "mostly customized" scrollbar
* (won't be visible otherwise if width/height is specified) */
.mostly-customized-scrollbar::-webkit-scrollbar {
width: 5px;
height: 8px;
background-color: #aaa; /* or add it to the track */
}
/* Add a thumb */
.mostly-customized-scrollbar::-webkit-scrollbar-thumb {
background: #000;
}
</pre>
<pre class="brush: html"><div class="visible-scrollbar">
Etiam sagittis sem sed lacus laoreet, eu fermentum eros auctor.
Proin at nulla elementum, consectetur ex eget, commodo ante.
Sed eros mi, bibendum ut dignissim et, maximus eget nibh. Phasellus
blandit quam turpis, at mollis velit pretium ut. Nunc consequat
efficitur ultrices. Nullam hendrerit posuere est. Nulla libero
sapien, egestas ac felis porta, cursus ultricies quam. Vestibulum
tincidunt accumsan sapien, a fringilla dui semper in. Vivamus
consectetur ipsum a ornare blandit. Aenean tempus at lorem sit
amet faucibus. Curabitur nibh justo, faucibus sed velit cursus,
mattis cursus dolor. Pellentesque id pretium est. Quisque
convallis nisi a diam malesuada mollis. Aliquam at enim ligula.
</div>
<div class="invisible-scrollbar">Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword</div>
<div class="mostly-customized-scrollbar">Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword<br>
And pretty tall<br>
thing with weird scrollbars.<br>
Who thought scrollbars could be made weeeeird?</div>
</pre>
<p>{{EmbedLiveSample('Exemples')}}</p>
<h2 id="Spécifications">Spécifications</h2>
<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.</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>
<h3 id="-webkit-scrollbar"><code>::-webkit-scrollbar</code></h3>
<p>{{Compat("css.selectors.-webkit-scrollbar")}}</p>
<h3 id="-webkit-scrollbar-button"><code>::-webkit-scrollbar-button</code></h3>
<p>{{Compat("css.selectors.-webkit-scrollbar-button")}}</p>
<h3 id="-webkit-scrollbar-thumb"><code>::-webkit-scrollbar-thumb</code></h3>
<p>{{Compat("css.selectors.-webkit-scrollbar-thumb")}}</p>
<h3 id="-webkit-scrollbar-track"><code>::-webkit-scrollbar-track</code></h3>
<p>{{Compat("css.selectors.-webkit-scrollbar-track")}}</p>
<h3 id="-webkit-scrollbar-track-piece"><code>::-webkit-scrollbar-track-piece</code></h3>
<p>{{Compat("css.selectors.-webkit-scrollbar-track-piece")}}</p>
<h3 id="-webkit-scrollbar-corner"><code>::-webkit-scrollbar-corner</code></h3>
<p>{{Compat("css.selectors.-webkit-scrollbar-corner")}}</p>
<h3 id="-webkit-resizer"><code>::-webkit-resizer</code></h3>
<p>{{Compat("css.selectors.-webkit-resizer")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>Billet du blog WebKit <a href="https://webkit.org/blog/363/styling-scrollbars/">sur la mise en forme des barres de défilement</a></li>
<li>{{cssxref('-ms-overflow-style')}}</li>
<li>{{CSSxRef("scrollbar-width")}}</li>
</ul>
|
