更改Mozilla和I.E中的滾動條格式，如chrome

Question

我想更改滾動條的顏色和其他屬性;
所以我寫的代碼波紋管鍍鉻：

/* 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就像我爲鉻做的。
特別我想改變滾動條拇指與邊界半徑
你有建議我做這樣的事情在火狐和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/