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