1. 程式人生 > >[分享] 通過修改CSS自定義chrome滾動條樣式

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

首先得說一句 我不懂CSS的寫法之類的 這段CSS也是在網上找的 所以有更先進的需求的話 我肯定不能滿足你們了 不好意思
效果圖在10樓有人上了 我這邊不管怎麼弄 上傳圖片都卡在96% 而且不翻wall不能回帖 翻wall的情況下 上論壇這個慢啊 所以 大家去看這個圖吧http://bbs.kafan.cn/forum.php?mo ... &fromuid=487958
大家都知道哈 chrome能自定義的東西比較少 不像FF或者opera那樣 幾個樣式 或者指令碼 就能把瀏覽器改成任何想要的樣子 不過 今天我抽時間研究了一下 發現自定義個滾動條還是可以的 畢竟對於chrome來說 UI上的東西本來就很少 標籤頁 可以通過主題修改 那麼滾動條 就可以通過CSS修改了
  1. ::-webkit-scrollbar
  2. {
  3.     width: 6px;
  4.     height: 6px;
  5. }
  6. ::-webkit-scrollbar-track-piece
  7. {
  8.     background-color: #CCCCCC;
  9.     -webkit-border-radius: 6px;
  10. }
  11. ::-webkit-scrollbar-thumb:vertical
  12. {
  13.     height: 5px;
  14.     background-color: #999999;
  15.     -webkit-border-radius: 6px;
  16. }
  17. ::-webkit-scrollbar-thumb:horizontal
  18. {
  19.     width: 5px;
  20.     background-color: #CCCCCC;
  21.     -webkit-border-radius: 6px;
  22. }
複製程式碼 程式碼就是上面那些 我大概講一下 這段程式碼的意思 看圖 那個非常不好意思 卡飯不能上傳圖片 我只好外鏈一下

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

滾動條顏色設定(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;
 background-color:#000;
 -webkit-border-radius:4px;
 outline-offset:-2px;
 border: 2px solid #000;
}
::-webkit-scrollbar-thumb:hover{
 height:50px;
 background-color:#000;
 -webkit-border-radius:4px;