Pasar al contenido principal
Alexys Lozada
José Luján
Manuel Rodriguez
José Luján
Luis Avilés
Álvaro Felipe
José Luján
Beto Quiroga
Jonathan MirCha
Jonathan MirCha
Álvaro Felipe
Alexys Lozada, Álvaro Felipe, Jonathan MirCha
Beto Quiroga
Alexys Lozada
Alexys Lozada
José Luján
Álvaro Felipe
Álvaro Felipe
Jonathan MirCha
Jonathan MirCha
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Camilo Adobe
Álvaro Felipe
José Luján
Jonathan MirCha
Álvaro Felipe
Álvaro Felipe
Beto Quiroga, Alexys Lozada
Álvaro Felipe
Juan Villalvazo
Luis Avilés
Jonathan MirCha
Jonathan MirCha
Jonathan MirCha

Personaliza el scroll de tu web sólo con CSS

Aprende a personalizar la barra de scroll de tu sitio web de forma rápida y sin javascript

Aprende a personalizar la barra de scroll de tu sitio web de forma rápida y sencilla

¿Te has llegado a preguntar cómo puedes personalizar la barra de scroll de tu sitio web? Ya sea porque quieres crear un scroll que se ve sensacional con una interfaz que diseñaste o el simple hecho de que los estilos que tiene por defecto son aburridos y feos. Sea cual sea la razón has llegado al lugar correcto, porque el día de hoy aprenderemos a cómo personalizar el scroll en una página web utilizando sólo CSS. Advertencia: este método sólo es compatible con navegadores basados en Webkit. Para mayor información visita Can I Use.

Empecemos conociendo las partes del scroll, que si bien se divide en varios componentes, los que más nos importan en esta ocasión son tres: scroll, track y thumb

Partes del scroll

Una vez que ya conocemos la manera en que se conforma el scroll y con la ayuda del pseudo elemento ::-webkit-scrollbar procederemos a crear nuestros estilos

webkit-scrollbar

Con ::-webkit-scrollbar nos encargaremos de definir la altura y la anchura del componente Scroll. Y si lo deseas, lo puedes ocultar sin afectar su funcionamiento.

.container::-webkit-scrollbar {
    width: 8px;     /* Tamaño del scroll en vertical */
    height: 8px;    /* Tamaño del scroll en horizontal */
    display: none;  /* Ocultar scroll */
}

webkit-scrollbar-thumb

Con ::-webkit-scrollbar-thumb podremos modificar los bordes, fondo y sombras el componente thumb, lo mejor de todo es que podemos utilizar las pseudo clases active y hover sobre este componente

/* Ponemos un color de fondo y redondeamos las esquinas del thumb */
.container::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}

/* Cambiamos el fondo y agregamos una sombra cuando esté en hover */
.container::-webkit-scrollbar-thumb:hover {
    background: #b3b3b3;
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
}

/* Cambiamos el fondo cuando esté en active */
.container::-webkit-scrollbar-thumb:active {
    background-color: #999999;
}

webkit-scrollbar-track

Con ::-webkit-scrollbar-track es la misma historia que con ::-webkit-scrollbar-thumb respecto a los estilos y pseudo clases, pero aplicados al track.

/* Ponemos un color de fondo y redondeamos las esquinas del track */
.container::-webkit-scrollbar-track {
    background: #e1e1e1;
    border-radius: 4px;
}

/* Cambiamos el fondo cuando esté en active o hover */
.container::-webkit-scrollbar-track:hover,
.container::-webkit-scrollbar-track:active {
  background: #d4d4d4;
}

El resultado de todo lo anterior da lo siguiente:

See the Pen Scroll style only CSS | EDteam blog by Juan Alexis Mora Angulo (@Jopzik) on CodePen.

Y de esta manera tan sencilla podrás crear variedad de estilos para la barra de scroll y usarlos donde lo requieras en tu web.

Puedes aprender más de CSS en nuestro curso gratuito CSS Desde Cero.

Suscríbete al blog de EDteam

Ingresa tu correo electrónico para recibir nuestro boletín semanal