change scroll-bar format in Mozilla and I.E like chrome - css

Question

I want to change scroll-bar color and other properties;
So I wrote the code bellow for 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 */
This is jsfiddle and This is full screen if you use chrome you can see right result.
and I tried this code for 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;
}
But it's not enough for my case.
Now I want to change scroll-bar in I.E and Mozila like I did for chrome.
Specially I want to change scrollbar-thumb with border-radius
Do you have suggestion for me to make something like this in FireFox and I.E.?Thanks in advance.

Answer 1

What you can use is this Jquery Plugin.
http://jscrollpane.kelvinluck.com/fullpage_scroll.html
You will need all of these plugins:
jquery
mousewheel
mwheelIntent
scrollpane
Once you acquire all of these and implement them, then you can edit the CSS for the scrollbars to what you want. Make sure you use the code provided on that page.
For instance, on the page I provided, these CSS styles can be altered to get what you want.
.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
}
Realize that border-radius does not work on older versions of Internet Explorer.

Answer 2

Check out your options here: http://www.unheap.com/?s=scroll
The most popular solution seems to be http://www.yuiazu.net/perfect-scrollbar/