javascript - CSS3 时尚滚动条在 Firefox 和 IE 中不起作用

Question

. .纯 Css3 滚动条在 IE 和 Firefox Guys 中不起作用。 .任何人都可以调整，以便它可以与上述浏览器一起使用。这是代码和 fiddle (请在 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

Answer 1

仅仅使用CSS3，肯定还不能兼容所有的浏览器，尤其是IE。和border-radius等效果一样。

此外，仅通过使用 ::-webkit-scrollbar，显然它仅适用于 webkit 浏览器，例如 google chrome、safari..

我建议您使用 JS 插件。推荐jScrollPane! http://jscrollpane.kelvinluck.com/basic.html