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.