css - 像 chrome 一样在 Mozilla 和 I.E 中更改滚动条格式

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 更改 scrollbar-thumb
你对我在 FireFox 和 I.E. 中做这样的事情有什么建议吗？
提前致谢。

Answer 1

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

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

您将需要所有这些插件:

• jquery
• 鼠标滚轮
• mwheelIntent
• 滚动 Pane

一旦你获得了所有这些并实现了它们，你就可以将滚动条的 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 上不起作用。