Css3 / webkit: как изменить размер ползунка полосы прокрутки?

Question

скрипка: 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;
}

Я пытался установить высоту с помощью трек-куска и большого пальца, но я не думаю, что это правильный путь.

Кто-нибудь знает секрет? Я не нашел в Google ничего конкретного.

Answer 1

Установите свойства height и width: http://jsfiddle.net/vVJGD/8/, Webkit назначит им соответствующую ориентацию.

Answer 2

Если я не понял ваш вопрос ...

Вы можете сделать это, установив поле на ::-webkit-scrollbar-track. Используя 50px в качестве номера примера ...

Для вертикальных полос прокрутки: margin: 50px 0;

Для горизонтальных полос прокрутки: margin: 0 50px;

Я не проверял это подробно, поэтому я не знаю ни одной проблемы, которая может вызвать.

Пример работы над JSFiddle выше: http://jsfiddle.net/qrgc8spm/

Answer 3

Да, это возможно. Мы можем отредактировать в css стиль:

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

Answer 4

Как насчет этого:

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