[分享] 通過修改CSS自定義chrome滾動條樣式
阿新 • • 發佈：2019-02-17
首先得說一句 我不懂CSS的寫法之類的 這段CSS也是在網上找的 所以有更先進的需求的話 我肯定不能滿足你們了 不好意思
效果圖在10樓有人上了 我這邊不管怎麼弄 上傳圖片都卡在96% 而且不翻wall不能回帖 翻wall的情況下 上論壇這個慢啊 所以 大家去看這個圖吧http://bbs.kafan.cn/forum.php?mo ... &fromuid=487958
大家都知道哈 chrome能自定義的東西比較少 不像FF或者opera那樣 幾個樣式 或者指令碼 就能把瀏覽器改成任何想要的樣子 不過 今天我抽時間研究了一下 發現自定義個滾動條還是可以的 畢竟對於chrome來說 UI上的東西本來就很少 標籤頁 可以通過主題修改 那麼滾動條 就可以通過CSS修改了 
#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;
效果圖在10樓有人上了 我這邊不管怎麼弄 上傳圖片都卡在96% 而且不翻wall不能回帖 翻wall的情況下 上論壇這個慢啊 所以 大家去看這個圖吧http://bbs.kafan.cn/forum.php?mo ... &fromuid=487958
大家都知道哈 chrome能自定義的東西比較少 不像FF或者opera那樣 幾個樣式 或者指令碼 就能把瀏覽器改成任何想要的樣子 不過 今天我抽時間研究了一下 發現自定義個滾動條還是可以的 畢竟對於chrome來說 UI上的東西本來就很少 標籤頁 可以通過主題修改 那麼滾動條 就可以通過CSS修改了
-
::-webkit-scrollbar
-
{
-
width: 6px;
-
height: 6px;
-
}
-
::-webkit-scrollbar-track-piece
-
{
-
background-color: #CCCCCC;
-
-webkit-border-radius: 6px;
-
}
-
::-webkit-scrollbar-thumb:vertical
-
{
-
height: 5px;
-
background-color: #999999;
-
-webkit-border-radius: 6px;
-
}
-
::-webkit-scrollbar-thumb:horizontal
-
{
-
width: 5px;
-
background-color: #CCCCCC;
-
-webkit-border-radius: 6px;
- }
大家不要直接我用的這個引數 我就是隨便給了幾個 其實大家也可以看出來 如果把垂直和水平的引數設定成不一樣的 那麼垂直和水平的滾動條寬度啊 顏色啊 就會不同 其實好好修改一下 也是挺好看的
滾動條顏色設定（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;