Estilo de barra de desplazamiento CSS3 en un div

¿Cómo puedo estilizar las barras de desplazamiento de webkit con CSS3?

Me refiero a estas propiedades

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

Aquí está mi etiqueta div

<div class="scroll"></div>

Aquí está mi CSS actual

.scroll {
   width: 200px; height: 400px;
   overflow: hidden;
}
Author: jacktheripper, 2012-09-09
Source

4 answers

El ajuste overflow: hidden oculta la barra de desplazamiento. Establezca overflow: scroll para asegurarse de que la barra de desplazamiento aparezca todo el tiempo.

Para usar la propiedad ::webkit-scrollbar, simplemente seleccione .scroll antes de llamarla.

.scroll {
   width: 200px;
   height: 400px;
    background: red;
   overflow: scroll;
}
.scroll::-webkit-scrollbar {
    width: 12px;
}

.scroll::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}

.scroll::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
​

Ver este ejemplo en vivo

 62
Author: jacktheripper,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-09-09 09:11:52 
.scroll {
   width: 200px; height: 400px;
   overflow: auto;
}
 0
Author: Meisam Mulla,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-09-09 09:04:38

Estás configurando overflow: hidden. Esto ocultará cualquier cosa que sea demasiado grande para <div>, lo que significa que las barras de desplazamiento no se mostrarán. Dale a tu <div> un ancho y/o alto explícito, y cambia overflow a auto: 

.scroll {
   width: 200px;
   height: 400px;
   overflow: scroll;
}

Si solo desea mostrar una barra de desplazamiento si el contenido es más largo que el <div>, cambie overflow a overflow: auto. También puede mostrar solo una barra de desplazamiento usando overflow-y o overflow-x.

 0
Author: Bojangles,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-09-09 09:08:02

El problema con las barras de desplazamiento css3 es que la interacción solo se puede realizar en el contenido. no podemos interactuar con la barra de desplazamiento en dispositivos táctiles.

 0
Author: user2845300,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-10-14 04:48:35