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?

回答1:

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

回答2:

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

回答3:

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.

来源：https://stackoverflow.com/questions/7700859/cant-apply-width-and-height-to-webkit-scrollbar-using-css