Css3 / webkit: how to resize scroll bar slider?

Question

script: http://jsfiddle.net/vVJGD/

::-webkit-scrollbar{ width: 10px; padding-top: 40px; } ::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.3); border: 1px solid black; background: rgb(41,41,41); border-radius: 10px; } ::-webkit-scrollbar-thumb{ border-radius:10px; height: 30px; width: 8px; border: 1px solid black; background: rgb(111,111,111); -webkit-box-shadow: 0 1px 1px rgb(0,0,0); background: -webkit-linear-gradient(rgb(200,200,200), rgb(150,150,150)); } ::-webkit-scrollbar-track-piece { height: 30px; } 

I tried to set the height using the track and thumb, but I do not think that is correct.

Does anyone know a secret? I did not find anything in google for this particular one.

Answer 1

Set the height and width properties: http://jsfiddle.net/vVJGD/8/ , Webkit will assign them to the appropriate orientation.

Answer 2

Yes it is possible. We can edit in css style:

 ::-webkit-scrollbar-thumb { background: #bbbbbb; background: rgba(0, 0, 0, 0.15); border-radius: 5px; height: 50px; } 

Answer 3

If I do not understand your question ...

You can do this by setting the margins above and below: margin: 50px 0; for vertical scrollbars or left and right margin: 0 50px; for horizontal scrollbars.

I have not tested this in detail, so I do not know any problems that might cause this.

An example of his work on JSFiddle: http://jsfiddle.net/qrgc8spm/

Answer 4

How about this:

 html { overflow: scroll; } body { position: absolute; left: 20px; right: 20px; padding: 30px; overflow-y: scroll; overflow-x: hidden; }