Есть ли простой способ стилизации полос прокрутки

Question

Я хочу добавить «переполнение: прокрутку» в навигационный div, но по умолчанию прокрутка по окнам является отвратительной.

Нет ли простого способа стилизации полосы прокрутки без загрузки дополнительных библиотек javascrip, API и т. Д.?

Answer 1

вы можете сделать что-то с WebKit.

вот основные элементы скроллинга

::-webkit-scrollbar    
::-webkit-scrollbar-button  
::-webkit-scrollbar-track  
::-webkit-scrollbar-track-piece 
::-webkit-scrollbar-thumb  
::-webkit-scrollbar-corner  
::-webkit-resizer 

и здесь состояния прокрутки

:horizontal 
:vertical 
:decrement 
:increment 
:start 
:end 
:double-button 
:single-button 
:no-button 
:corner-present 
:window-inactive 

скажем:

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

::-webkit-scrollbar-track { 
    -webkit-box-shadow: inset 0 0 1px #CCC; 
    border-radius: 5px; 
} 

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

надеюсь, что это помогает.

Answer 2

Их довольно много способов , если вам необходимо поддерживать все браузеры, вы должны пойти на плагин как Nicescroll

В том случае, если вы считаете его значение для поддержки Firefox , то вы можете использовать эти

::-webkit-scrollbar { 
    height: 8px; 
    width: 8px; 
    margin: 10px; 
    padding-bottom: 10px; 
} 
::-webkit-scrollbar-track { 
    background: #E6E6E6; 
    height:8px; 
    width: 8px; 
    border-radius: 8px; 
    margin: 10px; 
} 

::-webkit-scrollbar-thumb { 
    background: #aaa; 
    height:8px; 
    width: 8px; 
    border-radius: 8px; 
    cursor:pointer; 
    margin: 10px; 
} 
::-webkit-scrollbar-thumb:window-inactive { 
    background: #ccc; 
    -webkit-transition: all 0.3s ease-out; 
    -moz-transition: all 0.3s ease-out; 
    -o-transition: all 0.3s ease-out; 
    transition: all 0.3s ease-out; 
} 
/* IE SPECIFIC */ 
body{ 
    scrollbar-base-color: #aaa; 
    scrollbar-3dlight-color: #aaa; 
    scrollbar-highlight-color: #aaa; 
    scrollbar-track-color: #e6e6e6; 
    scrollbar-arrow-color: #ccc; 
    scrollbar-shadow-color: #aaa; 
    scrollbar-dark-shadow-color: #aaa; 
} 

Answer 3

Вот статья, которая описывает красиво CSS3-стиль прокрутки в браузерах webkit.

http://css-tricks.com/custom-scrollbars-in-webkit/

Для решения кросс-браузера вы должны прибегнуть к JS библиотек, таких как: http://jscrollpane.kelvinluck.com/

Answer 4

стилизации полоса прокрутки не стандартизирован и поэтому не кросс-браузер. При этом они поддерживаются в большинстве браузеров.

Взгляните на этот SO ответ:

CSS customized scroll bar in div