Skip to main content
added 140 characters in body
Fonte Link
Joao Paulo
  • 12mil
  • 26
  • 89
  • 153

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:gray;#bfbfbf; height:15px;}

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

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

Da barra de rolagem na vertical:

::-webkit-scrollbar-thumb:vertical{height:5px;backgroundbackground-color:#EEE9E9;#bfbfbf; border-top:1px solid #a4a4a4; border-bottom:1px solid #a4a4a4}

Da barra de rolagem na horizontal:

::-webkit-scrollbar-thumb:horizontal{width:3px;backgroundbackground-color:#EEE9E9;black;}

Do botão inferior(da barra vertical):

::-webkit-scrollbar-button:vertical:increment {background-image:url(http://image.com"Imagens/setabaixoseta-baixo.pngpng");}

Do botão superior(da barra vertical):

::-webkit-scrollbar-button:vertical:decrement {background-image:url(http://image.com"Imagens/setacimaseta-cima.pngpng");}

Resultado:

inserir a descrição da imagem aqui

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:gray; height:15px;}

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

::-webkit-scrollbar-track-piece {background-color:lightgray;}

Da barra de rolagem na vertical:

::-webkit-scrollbar-thumb:vertical{height:5px;background-color:#EEE9E9;}

Da barra de rolagem na horizontal:

::-webkit-scrollbar-thumb:horizontal{width:3px;background-color:#EEE9E9;}

Do botão inferior(da barra vertical):

::-webkit-scrollbar-button:vertical:increment {background-image:url(http://image.com/setabaixo.png);}

Do botão superior(da barra vertical):

::-webkit-scrollbar-button:vertical:decrement {background-image:url(http://image.com/setacima.png);}

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

added 222 characters in body
Fonte Link
Joao Paulo
  • 12mil
  • 26
  • 89
  • 153

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;height:5px;15px;}

Dos botões (cima/baixo):

::-webkit-scrollbar-button{background-color:#CDC9C9;width:15px;heightgray; height:17px;15px;}

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

::-webkit-scrollbar-track-piece {background-color:#ffffff;-webkit-border-radius:0px;lightgray;}

Da barra de rolagem na vertical:

::-webkit-scrollbar-thumb:vertical{height:5px;background-color:#EEE9E9;-webkit-border-radius:0px;}

Da barra de rolagem na horizontal:

::-webkit-scrollbar-thumb:horizontal{width:3px;background-color:#EEE9E9;-webkit-border-radius:0px;}

Do botão inferior(da barra vertical):

::-webkit-scrollbar-button:vertical:increment {background-image:url(httpshttp://lh4.googleusercontentimage.com/-KQfCHJwQRHQ/UtceeoSe3SI/AAAAAAAACLg/KngWcfzAPSs/s1600/setabaixo.png);}

Do botão superior(da barra vertical):

::-webkit-scrollbar-button:vertical:decrement {background-image:url(httpshttp://lh4.googleusercontentimage.com/-dgdE4h4PFxM/Utceh2Sh30I/AAAAAAAACLo/_CUrC-yGxrQ/s1600/setacima.png);}

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

::-webkit-scrollbar{width:15px;height:5px;}
::-webkit-scrollbar-button{background-color:#CDC9C9;width:15px;height:17px;}
::-webkit-scrollbar-track-piece {background-color:#ffffff;-webkit-border-radius:0px;}
::-webkit-scrollbar-thumb:vertical{height:5px;background-color:#EEE9E9;-webkit-border-radius:0px;}
::-webkit-scrollbar-thumb:horizontal{width:3px;background-color:#EEE9E9;-webkit-border-radius:0px;}
::-webkit-scrollbar-button:vertical:increment {background-image:url(https://lh4.googleusercontent.com/-KQfCHJwQRHQ/UtceeoSe3SI/AAAAAAAACLg/KngWcfzAPSs/s1600/setabaixo.png);}
::-webkit-scrollbar-button:vertical:decrement {background-image:url(https://lh4.googleusercontent.com/-dgdE4h4PFxM/Utceh2Sh30I/AAAAAAAACLo/_CUrC-yGxrQ/s1600/setacima.png);}

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:gray; height:15px;}

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

::-webkit-scrollbar-track-piece {background-color:lightgray;}

Da barra de rolagem na vertical:

::-webkit-scrollbar-thumb:vertical{height:5px;background-color:#EEE9E9;}

Da barra de rolagem na horizontal:

::-webkit-scrollbar-thumb:horizontal{width:3px;background-color:#EEE9E9;}

Do botão inferior(da barra vertical):

::-webkit-scrollbar-button:vertical:increment {background-image:url(http://image.com/setabaixo.png);}

Do botão superior(da barra vertical):

::-webkit-scrollbar-button:vertical:decrement {background-image:url(http://image.com/setacima.png);}
Fonte Link
Joao Paulo
  • 12mil
  • 26
  • 89
  • 153

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

::-webkit-scrollbar{width:15px;height:5px;}
::-webkit-scrollbar-button{background-color:#CDC9C9;width:15px;height:17px;}
::-webkit-scrollbar-track-piece {background-color:#ffffff;-webkit-border-radius:0px;}
::-webkit-scrollbar-thumb:vertical{height:5px;background-color:#EEE9E9;-webkit-border-radius:0px;}
::-webkit-scrollbar-thumb:horizontal{width:3px;background-color:#EEE9E9;-webkit-border-radius:0px;}
::-webkit-scrollbar-button:vertical:increment {background-image:url(https://lh4.googleusercontent.com/-KQfCHJwQRHQ/UtceeoSe3SI/AAAAAAAACLg/KngWcfzAPSs/s1600/setabaixo.png);}
::-webkit-scrollbar-button:vertical:decrement {background-image:url(https://lh4.googleusercontent.com/-dgdE4h4PFxM/Utceh2Sh30I/AAAAAAAACLo/_CUrC-yGxrQ/s1600/setacima.png);}