A medida que va pasando el tiempo se van perfeccionando y adicionando nuevos códigos para las personalizaciones mediante hojas de estilo en cascada o mayormente conocido como CSS.
En esta ocasión les traigo la modificacion del scrollbar con unos simples códigos:
Componentes:
También son llamados pseudo-elementos. Son los componentes del scrollbar:
::-webkit-scrollbar { /* 1 */ }
::-webkit-scrollbar-button { /* 2 */ }
::-webkit-scrollbar-track { /* 3 */ }
::-webkit-scrollbar-track-piece { /* 4 */ }
::-webkit-scrollbar-thumb { /* 5 */ }
::-webkit-scrollbar-corner { /* 6 */ }
::-webkit-resizer { /* 7 */ }
Corresponden a:
Estados del scrollbar:
También son llamadas pseudo-clases. Con ellas puedes hacer referencias a secciones más especifícas de los scrollbar y aplicarles efectos personalizados. Por ejemplo, con estas pseudo-clases puedes seleccionar solamente los scrollbars horizontales, los botones de incremento o decremento, etc.
:horizontal
:vertical
:decrement
:increment
:start
:end
:double-button
:single-button
:no-button
:corner-present
:window-inactive
Ejemplo idéntico usado en NochesDeCode.com.ar:
/* ScrollBar NochesDeCode.com.ar */
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: #000000;
-webkit-border-radius: 10px;
border-radius: 10px;
}
::-webkit-scrollbar-track-piece {
background-color: #000000;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: #EB8A1D;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: #EB8A1D;
}
/* Final ScrollBar NochesDeCode.com.ar */
el resultado es idéntico al de NochesDeCode.