Изменение формы полосы прокрутки с помощью CSS

Question

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

Как я могу достичь этого через CSS? Или это вообще невозможно. Я поддерживаю это в IE10. Это мой css для полосы прокрутки, которая у меня есть.

.scrollbar-vertical 
{ 
    top: 0; 
    right: 0; 
    width: 17px; 
    height: 100%; 
    overflow-x: hidden; 
    scrollbar-3dlight-color:#999; 
    scrollbar-arrow-color:white; 
    scrollbar-base-color:white; 
    scrollbar-face-color:#999; 
    border-radius:5px 5px; 

} 

Answer 1

Проверьте эту страницу для хорошей отправной точки http://cssdeck.com/labs/css3-webkit-vertical-scrollbars. К ним, к сожалению, относятся только браузеры, использующие webkit.

Чтобы получить закругленные овальную форму скроллбары вы можете сделать что-то, как показано ниже:

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

::-webkit-scrollbar { 
    width: 12px; 
    background-color: #F5F5F5; 
} 

::-webkit-scrollbar-thumb { 
    border-radius: 10px; 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); 
    background-color: #D62929; 
} 

Не тестировался, вы можете использовать JQuery пользовательские полосы прокрутки, как показано на этой странице: http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html