Невозможно применить ширину и высоту к -webkit-scrollbar с помощью CSS

Question

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

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

Почему атрибуты width и height не работают?

Answer 1

width для вертикальных полос прокрутки, а height влияет на горизонтальные полосы прокрутки. Вы не можете определить высоту для вертикальной полосы прокрутки. Это зависит от размера контента.

Если вы хотите добавить фоновые изображения на полосу прокрутки, они добавляются как обычные элементы:

::-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

Answer 2

Это работает, за исключением height

Пример: http://jsfiddle.net/jasongennaro/gBrNf/

Достоверно уверен, потому что браузер определяет высоту полосы прокрутки на основевысота содержимого.(Больше контента равно короткой полосе прокрутки ... это визуальная подсказка, я не уверен, что вы можете переопределить.)