3

Possuo um combo select multiple que não pode ocupar muito espaço vertical, então o ideal seria poder descer o scroll com aquela setinha tradicional para navegar de 1 em 1 item pra baixo.

inserir a descrição da imagem aqui

Tem alguma forma de forçar o scroll tradicional, com javascript/jquery e/ou css, ou então no próprio html?

OBS: Chamo de tradicional qualquer estilo de barra de rolagem que possua o botão na parte inferior e superior para o usuário clicar e subir/descer linha a linha.

5
  • A barra de rolagem principal do meu chrome é assim!
    – utluiz
    Commented 27/02/2014 às 20:01
  • O que você define como "tradicional"? A barra de rolagem padrão do sistema operacional? Commented 27/02/2014 às 20:05
  • @utluiz: É ai que tá, essa barra não é nada favorável nesse caso. Preciso daquele botão pro usuário clicar. Mas no Chrome não tem, ele renderiza tudo assim.
    – Joao Paulo
    Commented 27/02/2014 às 20:05
  • @FabrícioMatté : expliquei na pergunta.
    – Joao Paulo
    Commented 27/02/2014 às 20:07
  • 1
    Ok, está mais claro agora. A versão Canary do Chrome já possui estes botões novamente então deve chegar ao Chrome estável em breve. Se precisar disto imediatamente, deve ser possível fazê-lo estilizando os pseudo-elementos ::-webkit-scrollbar-* Commented 27/02/2014 às 20:09

2 Respostas 2

6

Pesquisei e encontrei uma solução. Descobri que é possivel personalizar a barra com essas propriedades CSS:

Definindo propriedades:

Da barra de rolagem no geral:

::-webkit-scrollbar{width:15px; }

Dos botões (cima/baixo):

::-webkit-scrollbar-button{background-color:#bfbfbf; height:15px;}

Do fundo que fica atrás da barra de rolagem:

::-webkit-scrollbar-track-piece {background-color:#e4e4e4;}

Da barra de rolagem na vertical:

::-webkit-scrollbar-thumb:vertical{background-color:#bfbfbf; border-top:1px solid #a4a4a4; border-bottom:1px solid #a4a4a4}

Da barra de rolagem na horizontal:

::-webkit-scrollbar-thumb:horizontal{background-color:black;}

Do botão inferior(da barra vertical):

::-webkit-scrollbar-button:vertical:increment {background-image:url("Imagens/seta-baixo.png");}

Do botão superior(da barra vertical):

::-webkit-scrollbar-button:vertical:decrement {background-image:url("Imagens/seta-cima.png");}

Resultado:

inserir a descrição da imagem aqui

2
  • João, se possível, poste uma imagem do resultado.
    – utluiz
    Commented 27/02/2014 às 20:57
  • Alguma compatibilidade com outros navegadores? Eu lembro de quando a molecada fazia um cursinho de HTML e montava sites no FrontPage e enchia o código com instruções que mudavam a cor da barra de rolagem. Daí o Firefox começou a se popularizar e essa febre felizmente passou. Commented 25/11/2014 às 1:27
0

O jScrollPane pode resolver seu problema.

http://jscrollpane.kelvinluck.com/

Veja o exemplo para o que precisa no link a seguir:

http://jscrollpane.kelvinluck.com/arrows.html

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 .