19
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-thumb {
    background-color:#808080;
}

Why do the width and height attributes not work?

tw16
  • 29,215
  • 7
  • 63
  • 64
Michael Grigsby
  • 11,467
  • 9
  • 33
  • 52
  • I'm trying to get the scrollbar-thumb to scale to the given width and height. Also, how do I use custom images inside a webkit-scrollbar-thumb class? – Michael Grigsby Oct 09 '11 at 01:32
  • See if any of the sample CSS or links to further sample CSS in this answer help you: http://stackoverflow.com/questions/4641169/apple-like-scrollbars-using-css/4641257#4641257 – thirtydot Oct 09 '11 at 02:50

3 Answers3

39

width is for vertical scrollbars and height affects horizontal scrollbars. You can't define height for a vertical scrollbar. That is dependent on content size.

If you want to add background images to your scrollbar, they are added like normal elements:

::-webkit-scrollbar {
    width: 50px;
    height: 50px;
    background:-webkit-linear-gradient(0, blue 50%, white 100%);

}

::-webkit-scrollbar-thumb {
    background-color:#808080;
        background:url("http://www.topdesignmag.com/wp-content/uploads/2010/12/137.jpg");
}

Fiddle

SherylHohman
  • 16,580
  • 17
  • 88
  • 94
Mohsen
  • 64,437
  • 34
  • 159
  • 186
0

You cannot apply height to scrollbars as the browser needs to adjust height based on how much there is to scroll on the page (depending on the height of the page).

You can test it by having content that fits on a single page and by having content that is 3000px in height and see how the scrollbar will lower its size.

Djongov
  • 195
  • 2
  • 13
0

This works, except for the height

Example: http://jsfiddle.net/jasongennaro/gBrNf/

Fairly certain that's because the browser determines the height of the scrollbar based on the height of the content. (More content equals shorter scrollbar... it's a visual cue I am not sure you can override.)

Jason Gennaro
  • 34,535
  • 8
  • 65
  • 86