Изменение стиля прокрутки бар

Question

Пожалуйста, обратитесь по ссылке для примера: CLICK HERE

Я использую ниже CSS для изменения полосы прокрутки:

/* For the "inset" look only */ 
html { 
    overflow: auto; 
} 
body { 
    position: absolute; 
    top: 20px; 
    left: 20px; 
    bottom: 20px; 
    right: 20px; 
    padding: 30px; 
    overflow-y: scroll; 
    overflow-x: scroll; 
} 

/* Let's get this party started */ 
::-webkit-scrollbar { 
    width: 6px; 
} 

/* Track */ 
::-webkit-scrollbar-track { 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 6px; 
    border-radius: 6px; 
} 

/* Handle */ 
::-webkit-scrollbar-thumb { 
    -webkit-border-radius: 6px; 
    border-radius: 6px; 
    background: rgba(255,0,0,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
} 
::-webkit-scrollbar-thumb:window-inactive { 
    background: rgba(255,0,0,0.4); 
} 

Это CSS только изменить ширину у свитка , как я могу изменить ширину прокрутки x.

Пожалуйста, помогите мне решить эту проблему.

Answer 1

DEMO:

http://plnkr.co/edit/bBEj9xa6TucnJq6scIsq?p=preview

Использование ::-webkit-scrollbar {width: 6px; height: 6px;}

Проверьте демоверсию.

http://plnkr.co/edit/bBEj9xa6TucnJq6scIsq?p=preview

Также обратите внимание, что CSS на основе скроллбары не подходят для всех браузеров. Итак, моя рекомендация состояла бы в том, чтобы перейти на полосу прокрутки на основе js.

Я предпочитаю jquery.nicescroll

https://github.com/inuyaksa/jquery.nicescroll

Answer 2

Вы указали высоту, чтобы увеличить ширину прокрутки x. , например {}

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

Answer 3

вы можете стиль скроллбар как в х и у направлении. Херес Fiddle

::-webkit-scrollbar { 
    width: 12px; 
} 

::-webkit-scrollbar-track { 
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); 
    border-radius: 10px; 
} 

::-webkit-scrollbar-thumb { 
    border-radius: 10px; 
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5); 
} 

Answer 4

Спасибо всем за ваш ответ, но решение:

/* Let's get this party started */ 
::-webkit-scrollbar { 
    width: 6px;height:6px; 
}