estilo de la barra de desplazamiento CSS3 en un div

Question

¿Cómo puedo diseñar barras de desplazamiento 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 actual CSS

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

Answer 1

Configuración overflow: hidden oculta la barra de desplazamiento. Establezca overflow: scroll para asegurarse de que la barra de desplazamiento aparezca todo el tiempo.

Para utilizar la propiedad ::webkit-scrollbar, simplemente seleccione .scroll antes de llamar.

.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 vivo example

Answer 2

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

Answer 3

está configurando overflow: hidden. Esto ocultará todo lo que sea demasiado grande para el <div>, lo que significa que no se mostrarán las barras de desplazamiento. Dar a su <div> una anchura y/o altura explícita, y cambiar a overflowauto:

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

Si sólo 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 una barra de desplazamiento usando overflow-y o overflow-x.

Answer 4

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.