自定义Chrome浏览器本地滚动条样式

操作系统/浏览器

　　Win 8 / Chrome

实现

打开本机以下路径：

C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\

打开 Custom.css 文件（如果没有创建一个）；放入下面的CSS代码，并保存：

::-webkit-scrollbar
{
    width: 13px;
    height: 13px;
    background-color: #F5F5F5;
}
::-webkit-scrollbar-track-piece
{
    /*background-color: #CCCCCC;
    -webkit-border-radius: 0px;*/
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 1px;
    background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb:vertical
{
    /*height: 5px;
    background-color: #555555;
    -webkit-border-radius: 1px;*/
    
     border-radius: 1px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
}
::-webkit-scrollbar-thumb:horizontal
{
    width: 5px;
    background-color: #CCCCCC;
    -webkit-border-radius: 1px;
}
::-webkit-scrollbar-thumb:hover {
  background-color: #333333;
}
::-webkit-scrollbar-thumb:active {
  background-color: #666;
  background-color: #D62929;
}

参考

　　https://www.webkit.org/blog/363/styling-scrollbars/

　　http://www.xuanfengge.com/css3-webkit-scrollbar.html

转载于:https://www.cnblogs.com/jRoger/articles/3541222.html