How to customize scrollbar in Chrome?

Asked

Viewed 2,903 times

3

I have a select Multiple combo that can not take up much vertical space, so the ideal would be to be able to scroll down with that traditional arrow to navigate from 1 to 1 item down.

inserir a descrição da imagem aqui

Have some way to force the traditional scroll, with javascript/jquery and/or css, or in html itself?

OBS: I call traditional any style of scroll bar that has the button at the bottom and top for the user to click and go up/down line by line.

javascript jquery html css

  • The main scroll bar of my Chrome is like this!

  • What do you define as "traditional"? The standard operating system scroll bar?

  • @utluiz: That’s where it is, this bar is not favorable in this case. I need that button for the user to click. But in Chrome it doesn’t have, it renders everything like this.

  • @Fabríciomatté : I explained in the question.

  • 1

    Ok, it’s clearer now. Chrome’s Canary version already has these buttons again so it should reach stable Chrome soon. If needed immediately, it should be possible to do so by stylising the pseudo-elements ::-webkit-scrollbar-*

2 answers

6


I searched and found a solution. I found that it is possible to customize the bar with these CSS properties:

Defining properties:

Scroll bar in general:

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

Of the buttons (top/bottom):

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

From the bottom behind the scroll bar:

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

From the vertical scroll bar:

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

From the horizontal scroll bar:

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

From the bottom button (from the vertical bar):

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

From the top button (from the vertical bar):

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

Upshot:

inserir a descrição da imagem aqui

  • João, if possible, post an image of the result.

  • Any compatibility with other browsers? I remember when the kids were doing an HTML course and setting up websites on Frontpage and filling the code with instructions that changed the color of the scrollbar. Then Firefox started to become popular and this fever fortunately passed.

0

Browser other questions tagged javascript jquery html css

You are not signed in. Login or sign up in order to post.