files/es/web/css/_doublecolon_-webkit-scrollbar/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

---
title: '::-webkit-scrollbar'
slug: 'Web/CSS/::-webkit-scrollbar'
tags:
  - CSS
  - NeedsCompatTable
  - Pseudo-elemento
  - Referencia
translation_of: 'Web/CSS/::-webkit-scrollbar'
---
<p>{{Draft()}}{{CSSRef}}</p>

<h2 id="Resumen">Resumen</h2>

<p>El <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-elemento</a> <a href="/es/docs/Web/CSS">CSS</a>  <font face="Consolas, Liberation Mono, Courier, monospace">::-webkit-scrollbar</font> afecta el estilo de la barra de desplazamiento asociada a un elemento.</p>

<div class="note">
<p><code>::-webkit-scrollbar</code> sólo está disponible en navegadores basados en  <a class="external external-icon" href="https://webkit.org">WebKit</a><span style="font-size: 85%;"> (p.e., Google Chrome)</span>.</p>
</div>

<h2 id="Ejemplo">Ejemplo</h2>

<pre class="brush: css">.visible-scrollbar, .invisible-scrollbar {
  display: block;
  width: 10em;
  overflow: auto;
}
.invisible-scrollbar::-webkit-scrollbar {
  display: none;
}
</pre>

<pre class="brush: html">&lt;div class="visible-scrollbar"&gt;Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword&lt;/div&gt;
&lt;div class="invisible-scrollbar"&gt;Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword&lt;/div&gt;
</pre>

<p>{{EmbedLiveSample('Ejemplo')}}</p>