Diseñar solo la pista de la barra de desplazamiento - javascript, jquery, html, css

Quiero diseñar solo la pista de la barra de desplazamiento y quiero mantener los botones por defecto. Quiero crear algo como lo que hizo Microsoft Outlook.

Probé el siguiente código css:

.hb-chat-scroolbar::-webkit-scrollbar-thumb
{
border-radius: 10px;
width: 5px;
background-color: #f5f5f5;
}

.hb-chat-scroolbar::-webkit-scrollbar-track
{
border-radius: 10px;
width: 5px;
background-color: #f5f5f5;
}

Pero el diseño no funciona si webkit-scrollbar no se declara:

.hb-chat-scroolbar::-webkit-scrollbar {
width: 6px;
height: 6px;
}

Sin embargo, si agrego el código de la barra de desplazamiento, la flecha desaparecerá.

¿Algún truco para esto?

Respuestas

Esto puede estilizar el estilo de las flechas, pero ambos estilos al mismo tiempo, por lo que puede agregar un ícono con ambas flechas arriba y abajo y colocarlo.

  ::-webkit-scrollbar-button {
background: #666;
background: url(img/arrows_updown.gif); /* u get the idea */
height: 15px;
border-radius: 50%;
}

Quizás necesites un componente de Javascript para esto.