26

Boas,

Tenho perdido algum tempo à procura de soluções para isto mas não encontro, tenho uma scrollbar e gostava de diminuir o seu tamanho. Alguém me pode indicar algum site ou me dizer o que é preciso para fazer com que isto seja possível:

inserir a descrição da imagem aqui

Obrigado

1 Resposta 1

51

Para navegadores webkit (Chrome, Safari, Opera 15+):

::-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 */ }

Créditos do código acima: CSS Tricks

Para criar um scrollbar exactamente como no da imagem da tua pergunta seria algo deste genero:

::-webkit-scrollbar-track {
    background-color: #F4F4F4;
}
::-webkit-scrollbar {
    width: 6px;
    background: #F4F4F4;
}
::-webkit-scrollbar-thumb {
    background: #dad7d7;
}

Eis um exemplo online no jsFiddle: http://jsfiddle.net/nach90sq/


Contudo o código acima não irá funcionar no Internet Explorer, mas para isso podes usar isto:

scrollbar-base-color: #C0C0C0;
scrollbar-base-color: #C0C0C0;
scrollbar-3dlight-color: #C0C0C0;
scrollbar-highlight-color: #C0C0C0;
scrollbar-track-color: #EBEBEB;
scrollbar-arrow-color: black;
scrollbar-shadow-color: #C0C0C0;
scrollbar-dark-shadow-color: #C0C0C0;

Créditos do código acima: Codemug

Alternativamente podes sempre pesquisar no Google por jQuery plugins para scrollbars, e irás encontrar plugins como:

2
  • 1
    Obrigado era mesmo isso que andava a procura 15/06/2015 às 15:04
  • Eu alterei a scroll bar com css, porem as alterações ficam em TODAS paginas do site, gostaria que ficasse apenas na pagina que alterei... alguma ideia? Estou usando vue components, não sei se isto afeta 23/09/2021 às 11:10

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .