[分享] 通過修改CSS自定義chrome滾動條樣式

首先得說一句 我不懂CSS的寫法之類的 這段CSS也是在網上找的 所以有更先進的需求的話 我肯定不能滿足你們了 不好意思
效果圖在10樓有人上了 我這邊不管怎么弄 上傳圖片都卡在96% 而且不翻wall不能回帖 翻wall的情況下 上論壇這個慢啊 所以 大家去看這個圖吧http://bbs.kafan.cn/forum.php?mo ... &fromuid=487958
大家都知道哈 chrome能自定義的東西比較少 不像FF或者opera那樣 幾個樣式 或者腳本 就能把瀏覽器改成任何想要的樣子 不過 今天我抽時間研究了一下 發現自定義個滾動條還是可以的 畢竟對於chrome來說 UI上的東西本來就很少 標簽頁 可以通過主題修改 那么滾動條 就可以通過CSS修改了

2. ::-webkit-scrollbar
3. {
4.     width: 6px;
5.     height: 6px;
6. }
7. ::-webkit-scrollbar-track-piece
8. {
9.    
10.     -webkit-border-radius: 6px;
11. }
12. ::-webkit-scrollbar-thumb:vertical
13. {
14.     height: 5px;
15.    
16.     -webkit-border-radius: 6px;
17. }
18. ::-webkit-scrollbar-thumb:horizontal
19. {
20.     width: 5px;
21.    
22.     -webkit-border-radius: 6px;
23. }

復制代碼

代碼就是上面那些 我大概講一下 這段代碼的意思 看圖 那個非常不好意思 卡飯不能上傳圖片 我只好外鏈一下

大家不要直接我用的這個參數 我就是隨便給了幾個 其實大家也可以看出來 如果把垂直和水平的參數設置成不一樣的 那么垂直和水平的滾動條寬度啊 顏色啊 就會不同 其實好好修改一下 也是挺好看的

 

 

滾動條顏色設置（IE、chrome瀏覽器）

/*滾動條*/#nicescroll1{overflow-y:auto;overflow-x:hidden;height:580px;scrollbar-arrow-color:#302D30; /*三角箭頭的顏色*/scrollbar-face-color:#000; /*立體滾動條的顏色（包括箭頭部分的背景色）*/scrollbar-3dlight-color:#302D30; /*立體滾動條亮邊的顏色*/scrollbar-highlight-color:#302D30; /*滾動條的高亮顏色（左陰影？）*/scrollbar-shadow-color:#302D30; /*立體滾動條陰影的顏色*/scrollbar-darkshadow-color:#302D30; /*立體滾動條外陰影的顏色*/scrollbar-track-color:#302D30; /*立體滾動條背景顏色*/scrollbar-base-color:#302D30; /*滾動條的基色*/}#nicescroll2{overflow-y:auto;overflow-x:hidden;height:396px;scrollbar-arrow-color:#302D30; /*三角箭頭的顏色*/scrollbar-face-color:#000; /*立體滾動條的顏色（包括箭頭部分的背景色）*/scrollbar-3dlight-color:#302D30; /*立體滾動條亮邊的顏色*/scrollbar-highlight-color:#302D30; /*滾動條的高亮顏色（左陰影？）*/scrollbar-shadow-color:#302D30; /*立體滾動條陰影的顏色*/scrollbar-darkshadow-color:#302D30; /*立體滾動條外陰影的顏色*/scrollbar-track-color:#302D30; /*立體滾動條背景顏色*/scrollbar-base-color:#302D30; /*滾動條的基色*/}#commend_list{overflow-y:auto;overflow-x:hidden;height:229px;scrollbar-arrow-color:#f8f9fb; /*三角箭頭的顏色*/scrollbar-face-color:#000; /*立體滾動條的顏色（包括箭頭部分的背景色）*/scrollbar-3dlight-color:#302D30; /*立體滾動條亮邊的顏色*/scrollbar-highlight-color:#302D30; /*滾動條的高亮顏色（左陰影？）*/scrollbar-shadow-color:#302D30; /*立體滾動條陰影的顏色*/scrollbar-darkshadow-color:#302D30; /*立體滾動條外陰影的顏色*/scrollbar-track-color:#f8f9fb; /*立體滾動條背景顏色*/scrollbar-base-color:#302D30; /*滾動條的基色*/} 
/*chrome滾動條*/
::-webkit-scrollbar-track-piece{
 -webkit-border-radius:0;
}
::-webkit-scrollbar{
 width:8px;
 height:8px;
}
::-webkit-scrollbar-thumb{
 height:50px;
 
 -webkit-border-radius:4px;
 outline-offset:-2px;
 border: 2px solid #000;
}
::-webkit-scrollbar-thumb:hover{
 height:50px;
 
 -webkit-border-radius:4px;}