Si necesita diseñar sus barras de desplazamiento en este momento, una opción es usar una colección de ::webkit propiedades CSS prefijadas.
Lamentablemente, eso no ayuda mucho para Firefox o Edge, o el ecosistema de navegadores que los rodean.
Actualización de noviembre de 2019: Los estándares se han intensificado y nos han dado el color de la barra de desplazamiento y el ancho de la barra de desplazamiento, y Firefox ya los admite. Su mejor apuesta ahora mismo es probablemente usarlos y combinarlos con el ::webkit-scrollbar cosas. Demo más adelante en este artículo.
Pero si eso es lo suficientemente bueno para lo que necesita, puede ser bastante elegante con él:
Hay muchos de ellos en CodePen para navegar. Es bueno abstraer con un descaro @mixin también.
¡Hay buenas noticias en este frente! Los cuerpos-estándares se han movido hacia métodos de estandarización para diseñar barras de desplazamiento, comenzando con el margen (o ancho) de las mismas. La propiedad principal será scrollbar-gutter y Geoff lo ha escrito aquí. Con suerte, Autoprefixer nos ayudará a medida que finalice la especificación y los navegadores comiencen a implementarla para que podamos comenzar a escribir la versión estandarizada y obtener las versiones prefijadas de eso.
Pero, ¿y si necesitamos compatibilidad con varios navegadores?
Si las barras de desplazamiento con estilo son una necesidad (y no lo culpo), probablemente tendrá que buscar una solución de JavaScript. Debe haber docenas de bibliotecas para eso. Me encontré con simplebar y parece bastante moderno con fácil instanciación. Aquí hay una demostración de eso:
Aquí hay otro llamado barra de desplazamiento simple:
Das Surma hizo un tutorial muy elegante que crea una barra de desplazamiento personalizada que en realidad no requiere ningún JavaScript al desplazarse (bueno para el rendimiento), pero sí requiere algún código de configuración de JavaScript.
Las barras de desplazamiento personalizadas son extremadamente raras y eso se debe principalmente al hecho de que las barras de desplazamiento son uno de los bits restantes en la web que son prácticamente imposibles de estilizar (te estoy mirando, selector de fechas). Puede usar JavaScript para crear el suyo, pero eso es caro, de baja fidelidad y puede parecer lento. En este artículo, aprovecharemos algunas matrices CSS no convencionales para crear un desplazador personalizado que no requiera JavaScript mientras se desplaza, solo algo de código de configuración.
Insertaré una copia aquí: