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 所做的那样。
特别是我想将 scrollbar-thumb 更改为 border-radius
您是否建议我在 FireFox 和 I.E. 中制作类似的东西？
提前致谢。

Answer 1

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

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

您将需要所有这些插件:

• jquery
• 鼠标滚轮
• mwheel意图
• 滚动 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 上不起作用。