css3 - personalizar - scrollbar css generator

No se puede establecer el ancho de webkit-scrollbar-thumb

Question

Estoy tratando de diseñar una barra de desplazamiento personalizada que funcione en Chrome y Safari. He probado el siguiente CSS:

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

::-webkit-scrollbar-track {
    background-color: rgba(100, 100, 100, .5);
    width: 15px;
}

::-webkit-scrollbar-thumb {
    background-color: #818B99;
    border-radius: 9px;
    width: 9px;
}

Sin embargo, el width en el -webkit-scrollbar-thumb se está ignorando. Me gustaría que el pulgar sea más delgado que la pista, como se muestra arriba.

Parece que puedo falsificar el ancho estableciendo un borde en el -webkit-scrollbar-thumb de 3px con el mismo color que la pista, sin embargo, esto solo funciona con un color de fondo opaco, y necesito que funcione con un color transparente para la pista como arriba.

Ejemplo jsfiddle: http://jsfiddle.net/L6Uzu/1/

Answer 1

Tienes razón en que WebKit ignora la declaración de ancho en la barra de desplazamiento-pulgar. También lo ignora en la pista.

El problema con el uso de un border es que dibuja el borde dentro del pulgar, por lo que si simplemente hace que el color sea transparent , no funcionará.

La solución es cambiar donde se adjunta el fondo. Por defecto, el fondo se extiende bajo el borde, como se mencionó. Puede usar la propiedad de background-clip para cambiar esto, de modo que solo se extienda hasta el borde del cuadro de relleno. Entonces solo necesitas hacer un borde transparente de 3px, luego Bob es tu tío:

::-webkit-scrollbar-thumb {
    background-color: #818B99;
    border: 3px solid transparent;
    border-radius: 9px;
    background-clip: content-box;
}

Ver http://jsfiddle.net/L6Uzu/3/

Esto funciona correctamente en Chrome, pero Safari no tiene una implementación de radio de borde tan avanzada, por lo que las esquinas redondeadas no son visibles.