CSS3 стильная полоса прокрутки не работает в Firefox и IE

0

, Прокрутка Pure Css3 не работает в IE и Firefox Guys. , Может ли кто-нибудь настроить, чтобы он мог работать с вышеупомянутыми браузерами. Вот коды и скрипка (посмотрите в Chrome, Firefox и IE)

Html

<div class="scrollbar" id="ex3">
<div class="content">Example 3</div>
</div> 

CSS

.scrollbar{
width:150px;
height:300px;
background-color:lightgray;
margin-top:40px;
margin-left:40px;
overflow-y:scroll;
float:left;
}

.content{
height:450px;
} 


#ex3::-webkit-scrollbar{
width:16px;
background-color:#cccccc;
} 

#ex3::-webkit-scrollbar-thumb{
background-color:#B03C3F;
border-radius:10px;
}


#ex3::-webkit-scrollbar-thumb:hover{
background-color:#BF4649;
border:1px solid #333333;
}


#ex3::-webkit-scrollbar-thumb:active{
background-color:#A6393D;
border:1px solid #333333;
} 


#ex3::-webkit-scrollbar-track{
border:1px gray solid;
border-radius:10px;
-webkit-box-shadow:0 0 6px gray inset;
} 

FIDDLE

  • 1
    Ваш CSS-код относится только к WEBKIT (Chrome, Safari) -> #ex3::-webkit-scrollbar
  • 1
    Если вам нужно кросс-браузерное решение, вы должны сделать это с помощью JavaScript и пользовательских элементов. Что-то вроде: manos.malihu.gr/jquery-custom-content-scroller
Показать ещё 3 комментария
Теги:

1 ответ

1

Просто используя CSS3, он определенно еще не совместим со всеми браузерами, особенно IE. Это тот же эффект с радиусом границы и т.д.

Кроме того, просто используя ::-webkit-scrollbar, очевидно, что он работает только для веб-браузеров, таких как google chrome, safari..

Я предлагаю вам использовать JS Plugin. Рекомендуется использовать jScrollPane! http://jscrollpane.kelvinluck.com/basic.html

Ещё вопросы

Сообщество Overcoder
Наверх
Меню