Barra de scroll personalizada con CSS

Contamos con 7 pseudo-elementos para personalizar nuestra barra de scroll (scrollbar). Es importante saber que estas propiedades solo funcionan en navegadores webkit como Chrome, el nuevo Edge y Safari.

Propiedades de la barra de scroll

• ::-webkit-scrollbar controla los estilos para el fondo de la barra de scroll.
• ::-webkit-scrollbar-button estilos para los botones de subir y bajar.
• ::-webkit-scrollbar-thumb controla a nuestro elemento de desplazamiento arrastrable o manejador, cuyo tamaño se ajusta al contenido.
• ::-webkit-scrollbar-track el carril de la barra de desplazamiento bajo el thumb.
• ::-webkit-scrollbar-track-piece la parte del carril no cubierta por el thumb o manejador.
• ::-webkit-scrollbar-corner la esquina de las barras de scroll normalmente situada entre dos barras, una horizontal y otra vertical.
• ::-webkit-resizer el control arrastrable con el cual aumentar o disminuir el tamaño de la ventana.

Demo

Un ejemplo básico de como implementar estos estilos en el scroll principal, puedes hacer click en el botón CSS para ver el código:

See the Pen Custom Scrollbar with CSS by Angel Mavare (@angelmavare) on CodePen.

Espero que esta información haya sido de tu utilidad. Puedes encontrar mas publicaciones como esta en: https://pixonauta.com/snippets/