Style the scrollbar with css in Google Chrome (-webkit)

Question

Can somebody please help me? I want to do a simple style for the scrollbar. I found some information on the internet and tried it, but it seems that it doesn't really work for some reasons. The scrollbar looks fine when refreshing the page, but as soon as you touch the scrollbar it goes crazy. It fills with a lot of colours and you can't understand that that is a scrollbar.

Here how it looks before you touch it - http://i40.tinypic.com/a2evro.png

Here how it looks after you touch it - http://i44.tinypic.com/qzkirn.png

Here is the code that I put in css:

::-webkit-scrollbar {
width: 16px;
height: 16px; }

::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,0.10),inset 0 -1px 0 rgba(0,0,0,0.07); }

Thank you all. Cheers. Alex

Answer 1

Here is an example that works:

::-webkit-scrollbar {
    height: 12px;
    width: 12px;
    background: #000;
}

::-webkit-scrollbar-thumb {
    background: #393812;
    -webkit-border-radius: 1ex;
    -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
}

::-webkit-scrollbar-corner {
    background: #000;
}

Or you can use jScrollPane.