2015-04-17 2 views
13

У меня есть эта хорошая полоса прокрутки, которая работает в Chrome, а также в последних версиях сафари. Можно ли создать такую ​​же полосу прокрутки для браузеров IE 9+, используя только CSS3?Как создать пользовательские полосы прокрутки в IE?

.scrollbar 
{ 
    float: left; 
    height: 300px; 
    background: #F5F5F5; 
    overflow-y: scroll; 
    margin-bottom: 25px; 
} 

.scrollbar-active 
{ 
    min-height: 450px; 
} 

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

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

#scroll::-webkit-scrollbar-thumb 
{ 
    background-color: #000000; 
    border: 2px solid #555555; 
} 

HTML

<div class="scrollbar" id="scroll"> 
    <div class="scrollbar-active"></div> 
</div> 

http://jsfiddle.net/7gmut6w3/2/

ответ

23

Эти свойства CSS можно использовать, чтобы настроить стиль IE скроллинга:

body{ 
    scrollbar-base-color: #000; 
    scrollbar-face-color: #000; 
    scrollbar-3dlight-color: #000; 
    scrollbar-highlight-color: #000; 
    scrollbar-track-color: #000; 
    scrollbar-arrow-color: black; 
    scrollbar-shadow-color: #000; 
    scrollbar-dark-shadow-color: #000; 
} 

Более подробную информацию можно найти here и here.

СООБЩЕНИЕ О ПРЕДОСТЕРЕЖЕНИИ - Настройка собственного элемента веб-браузера (например, полосы прокрутки) может привести к возникновению всех видов странных краевых случаев и проблем с пользовательским интерфейсом. Будьте осторожны с любыми корректировками, которые вы делаете, убедившись, что дополнительное преимущество пользовательских полос прокрутки перевешивает проблемы, которые он будет представлять.

+1

Просто, чтобы указать на других, - похоже, до сих пор нет возможности настроить кривую/границу прокрутки IE. Или избавиться от верхней и нижней стрелок. – mmcrae

+1

... или изменить цвет больших пальцев независимо от цвета ползунка. – Walkor

+1

Я иду скрещенными глазами, или первые два свойства одинаковы? – PieBie

3

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

scrollbar-track-color: #AAA; 
scrollbar-3dlight-color: #AAA; 
scrollbar-darkshadow-color: #AAA; 
scrollbar-arrow-color: #AAA; 

сейчас, если бы вы могли регулировать ширину, чтобы сделать полосу прокрутки уже! Кто-нибудь понял это?

+0

Это отличное решение чтобы скрыть уродливые стрелки прокрутки Windows 8 без кодирования полос прокрутки с нуля. Спасибо, что поделился –

Смежные вопросы