改变Mozilla和I.E中的滚动条格式，就像chrome一样

Question

我想更改滚动条颜色和其他属性;
所以我为chrome编写了以下代码：

/* Chrome */
.contex#context::-webkit-scrollbar { width: 10px; height: 0px;}

.contex#context::-webkit-scrollbar-button {  background-color: #800000; }

.contex#context::-webkit-scrollbar-track {  background-color: #40210f;}

.contex#context::-webkit-scrollbar-track-piece { background-color: #ffffff;}

.contex#context::-webkit-scrollbar-thumb { height: 50px; background-color: #40210f; border-radius: 50%;}


.contex#context::-webkit-resizer { background-color: #666;}
/* Chrome */

这是jsfiddle
这是full screen ，如果您使用Chrome，则可以看到正确的结果。
我为 I.E尝试了这段代码。 ：

.contex#context {
    background-color:#fff;
    overflow:scroll;
    width:565px;
    height:490px;
    padding-right:5px;
    margin-left:140px;
    margin-top:100px;
    text-align:right;
    font-family:"B Koodak",Arial, Sens Serif;
    position:absolute;
  /* I.E scroll-bar */
  scrollbar-face-color: #40210f;
  scrollbar-track: transparant;
  scrollbar-base-color: #40210f;
  scrollbar-face-color: #40210f;
  scrollbar-3dlight-color: #800000;
  scrollbar-highlight-color: #FFF;
  scrollbar-track-color: #FFFFFF;
  scrollbar-arrow-color: #40210f;
  scrollbar-shadow-color: white;
  scrollbar-dark-shadow-color: #800000;
}

但这对我的情况来说还不够 现在我想改变 I.E 和 Mozila 中的滚动条，就像我为chrome做的那样。
特别我想用 border-radius 更改滚动条拇指 您是否建议我在 FireFox 和 I.E。中制作类似的内容？
提前致谢。

Answer 1

你可以使用的是这个Jquery插件。

http://jscrollpane.kelvinluck.com/fullpage_scroll.html

您将需要所有这些插件：

• jquery的
• 滚轮
• mwheelIntent
• 滚动面板

一旦获得所有这些并实现它们，您就可以将滚动条的CSS编辑为您想要的内容。确保使用该页面上提供的代码。

例如，在我提供的页面上，可以更改这些CSS样式以获得您想要的内容。

.jspArrow {
background: #800000; // Changed color
text-indent: -20000px;
display: block;
cursor: pointer;
padding: 0;
margin: 0;
}

.jspArrow.jspDisabled {
cursor: default;
background: #800000; // Color change, but line not necessary
}

.jspDrag {
background: #40210f; // Changed color
position: relative;
top: 0;
left: 0;
cursor: pointer;
border-radius: 50%; // Added line
}

.jspTrack {
background: #dde; // Remove this line
position: relative;
}

.jspVerticalBar {
position: absolute;
top: 0;
right: 0;
width: 16px;
height: 100%;
background: red; // Remove this line
}

意识到border-radius在旧版本的Internet Explorer上不起作用。

Answer 2

在此处查看您的选项：http://www.unheap.com/?s=scroll

最受欢迎的解决方案似乎是http://www.yuiazu.net/perfect-scrollbar/