Как изменить стиль полосы прокрутки в css

Question

Как изменить стиль полосы прокрутки в css или изменить другой пользовательский интерфейс в хромированном или любом браузере. Я видел много сайтов с разными пользовательскими интерфейсами.
Это можно сделать с помощью css или html?

Answer 1

Проверить here. Вы также можете проверить this link.

Используйте CSS как этот

html { 
    background: lightgrey; 
    height: 100%; 
    overflow: hidden; 
} 
body { 
    height: 100%; 
    background: whitesmoke; 
    overflow: scroll; 
    width: 80%; 
    max-width: 600px; 
    margin: 0 auto; 
    padding: 3em; 
    font: 100%/1.4 serif; 
    border: 1px solid rgba(0,0,0,0.25) 
} 
p { 
    margin: 0 0 1.5em; 
} 

body::-webkit-scrollbar { 
    width: 0.2em; 
} 

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

body::-webkit-scrollbar-thumb { 
    background-color: red; 
    outline: 1px solid red; 
} 

Answer 2

Вы можете попробовать, как это,

body { 
    scrollbar-face-color: #000000; 
    scrollbar-shadow-color: #2D2C4D; 
    scrollbar-highlight-color:#7D7E94; 
    scrollbar-3dlight-color: #7D7E94; 
    scrollbar-darkshadow-color: #2D2C4D; 
    scrollbar-track-color: #7D7E94; 
    scrollbar-arrow-color: #C1C1D1; 
} 

Еще один EXAMPLE с парения эффектом.

Answer 3

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

Что я советую, так это то, что вы выбираете (если можете) плагин jQuery. Мне нравится http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/complete_examples.html. Я часто использую его. Он очень мощный, настраиваемый и совместимый!