diff options
Diffstat (limited to 'files/fr/web/css/_doublecolon_-webkit-scrollbar/index.html')
| -rw-r--r-- | files/fr/web/css/_doublecolon_-webkit-scrollbar/index.html | 123 |
1 files changed, 123 insertions, 0 deletions
diff --git a/files/fr/web/css/_doublecolon_-webkit-scrollbar/index.html b/files/fr/web/css/_doublecolon_-webkit-scrollbar/index.html new file mode 100644 index 0000000000..45d4fff49e --- /dev/null +++ b/files/fr/web/css/_doublecolon_-webkit-scrollbar/index.html @@ -0,0 +1,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> |