Michael Grigsby
Michael Grigsby

Reputation: 12163

Can't apply width and height to -webkit-scrollbar using CSS

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

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

Why do the width and height attributes not work?

Upvotes: 21

Views: 48001

Answers (3)

Djongov
Djongov

Reputation: 325

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.

Upvotes: 0

Mohsen
Mohsen

Reputation: 65785

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

Upvotes: 40

Jason Gennaro
Jason Gennaro

Reputation: 34855

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.)

Upvotes: 0

Related Questions