Personalizar los scrollbars (o barras de desplazamiento) con el diseño de la interfaz de tu sitio web agrega un valor extra a tu sitio web. Mediante pseudo-elementos de CSS, puedes cambiar el estilo de las scrollbars de tu sitio web con estilos totalmente personalizados. En este tutorial, te mostraremos como llevarlo a cabo con CSS y Webkit.
Webkit te permite diseñar scrollbars mediante CSS personalizado. Solo basta con definir el pseudo-elemento para la scrollbar y Webkit desactivará su estilo integrado, para utilizar el que le acabas de proporciona en CSS mediante el elemento ::-webkit-scrollbar.
En este tutorial te proporcionaremos un pequeño snippet de CSS para que puedas cambiar el estilo por defecto de tu scrollbar y crear una barra de desplazamiento totalmente personalizada. Para ello utilizaremos solo 3 pseudo-elementos de Webkit: webkit-scrollbar, webkit-scrollbar-track y webkit-scrollbar-thumb. Utiliza el siguiente CSS en tu sitio web para crear barras de desplazamiento totalmente personalizadas.
Estilo 1:
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
Estilo 2:
::-webkit-scrollbar{
width: 12px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-track{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
border-radius: 10px;
background-color: #CCCCCC;
}
::-webkit-scrollbar-thumb{
border-radius: 10px;
background-color: #D62929;
background-image: -webkit-linear-gradient(90deg,transparent,rgba(0, 0, 0, 0.4) 50%,transparent,transparent)
}
Estilo 3:
::-webkit-scrollbar{
width: 10px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-track{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb{
background-color: #F90;
background-image: -webkit-linear-gradient(90deg,rgba(255, 255, 255, .2) 25%,transparent 25%,transparent 50%,rgba(255, 255, 255, .2) 50%,rgba(255, 255, 255, .2) 75%,transparent 75%,transparent)
}
En este snippet de ejemplo solo hemos utilizado estilos básicos para personalizar nuestra barra de desplazamiento. Te animamos a que personalices tus scrollbars con el diseño de la interfaz de tu sitio web.
Fuente: codexworld.com