Barra de rolagem colorida

Esta página é um anexo do post CSS: barra de rolagem colorida com ::webkit-scrollbar.

Aqui temos um exemplo de barra de rolagem colorida que deve funcionar no Google Chrome e em outros navegadores desktop que usam webkit.

Para um método mais atual e que funciona em todos os navegadores, use scrollbar-color.

Código para a folha de estilos:

/* barra de rolagem começa aqui - meuted.io */
    ::-webkit-scrollbar {height:15px;background:lightyellow;} /* barra de rolagem toda */
    ::-webkit-scrollbar-button {background:#0ff;}::-webkit-scrollbar-thumb {background:pink;} /* parte móvel */
    ::-webkit-scrollbar-button:hover, ::-webkit-scrollbar-thumb:hover {background: yellow;} /* mouse sobre parte móvel e sobre botão */
    ::-webkit-scrollbar-button:active, ::-webkit-scrollbar-thumb:active {background: lime;} /* clique sobre parte móvel e sobre botão */
    ::-webkit-scrollbar-corner {background:greenyellow;} /* canto inferior direito da barra de rolagem - só aparece quando as duas barras de rolagem são necessárias, vertical e horizontal */
/* barra de rolagem termina aqui - meuted.io */