Como personalizar a barra de rolagem.
01- Coloque esse código no seu CSS:
html::-webkit-scrollbar {width:22; height:auto;background: #FFF;}
html::-webkit-scrollbar-corner { background: #FFF;}
html::-webkit-scrollbar-button:vertical {height:1px;display:block;}
html::-webkit-scrollbar-button:horizontal {width:1px;display:block;}
html::-webkit-scrollbar-thumb:vertical {background-image: url(LINK DA IMAGEM PARA O BOTÃO DE ROLAGEM);border: 1px solid #A2A2A2;border-right:none;-webkit-border-radius: 8px;}
html::-webkit-scrollbar-thumb:horizontal {background-image: url(LINK DA IMAGEM PARA O BOTÃO DE ROLAGEM);border: 1px solid #A2A2A2;border-bottom;}
html::-webkit-scrollbar-thumb {background-image: url(LINK DA IMAGEM PARA O BOTÃO DE ROLAGEM);}
html::-webkit-scrollbar-thumb:hover {background-image: url(LINK DA IMAGEM PARA O BOTÃO DE ROLAGEM);border: 1px solid #A2A2A2;}
html::-webkit-scrollbar-track-piece {background: none;}
html::-webkit-scrollbar:vertical {border-left: 1px solid #A2A2A2;}
html::-webkit-scrollbar:horizontal {border-top: 1px solid #A2A2A2;}
Lembre-se de mudar aonde tem escrito:
LINK DA IMAGEM PARA O BOTÃO DE ROLAGEM, para o link da imagem da barrinha. Se vocês olharem na seção de backgrounds vão achar varias imagens lindas para a barrinha.
Créditos:
things-4you
Postado por I Love HTML. 12:05.
5 Comentários:
Tem como deixar ela redondinha ?
Tem como remover a barra de rolagem?
Ótimo o tutorial! Mas eu queria saber se tem como colocar aquelas setinhas que ficam no topo e em baixo da barra... eu coloquei um background de setinha em -webkit-scrollbar-button, só que não deu certo, ficou a mesma seta em cima e em baixo. Por favor me respondam <3 Quem bom que vocês voltaram! :3
Amei era oq eu tava procurando muito obrigado gostei muito do post e do site
Para arredondar a barra de rolagem tentem usar o propriedade box-radius:10px;
Postar um comentário
- Elogie, critique, mas faça isso com educação.
- Se seu comentário estiver com palavrões de baixo calão será excluído.
Assinar Postar comentários [Atom]
<< Página inicial