Google Chrome浏览器滚动条优化

0

做了一个Chrome滚动条优化的示例,但没做IE和Firefox的兼容。

::-webkit-scrollbar{width:16px;height:16px;box-sizing:border-box;} /** 滚动条基本信息 */
/**
 * 滚动条两端的按钮样式:
 * vertical:竖直滚动条;
 * :horizontal:横向滚动条;
 * :start:上边/左边按钮;
 * :end:下边/右边按钮
 * 后面控制条相同
 */
::-webkit-scrollbar-button{width:16px;height:16px;background-repeat:no-repeat;background-image:url("./bar_arrows.png");}
::-webkit-scrollbar-button:vertical:start{background-position:0px 0px;}
::-webkit-scrollbar-button:vertical:start:hover{background-position:-32px 0px;}
::-webkit-scrollbar-button:vertical:start:active{background-position:-32px 0px;}
::-webkit-scrollbar-button:vertical:end{background-position:-16px 0px;}
::-webkit-scrollbar-button:vertical:end:hover{background-position:-48px 0px;}
::-webkit-scrollbar-button:vertical:end:active{background-position:-48px 0px;}
::-webkit-scrollbar-button:horizontal:start{background-position:0px -16px;}
::-webkit-scrollbar-button:horizontal:start:hover{background-position:-32px -16px;}
::-webkit-scrollbar-button:horizontal:start:active{background-position:-32px -16px;}
::-webkit-scrollbar-button:horizontal:end{background-position:-16px -16px;}
::-webkit-scrollbar-button:horizontal:end:hover{background-position:-48px -16px;}
::-webkit-scrollbar-button:horizontal:end:active{background-position:-48px -16px;}
/** 滚动条颜色 */
::-webkit-scrollbar-track-piece{background-color:#BED8F5;-webkit-border-radius:1px;}
/** 控制条颜色 */
::-webkit-scrollbar-thumb:vertical{border:1px solid rgba(0,0,0,0.21);-webkit-border-radius:1px;background:#2A6CBA url("./bar_horizontal.png") center no-repeat;}
::-webkit-scrollbar-thumb:vertical:hover{border:1px solid rgba(0,0,0,0.21);background:#2A6CCC url("./bar_horizontal.png") center no-repeat;}
::-webkit-scrollbar-thumb:vertical:active{background:#2A6CCC url("./bar_horizontal.png") center no-repeat;}
::-webkit-scrollbar-thumb:horizontal{border:1px solid rgba(0,0,0,0.2);-webkit-border-radius:1px;background:#2A6CBA url("./bar_vertical.png") center no-repeat;}
::-webkit-scrollbar-thumb:horizontal:hover{border:1px solid rgba(0,0,0,0.2);background:#2A6CCC url("./bar_vertical.png") center no-repeat;}
::-webkit-scrollbar-thumb:horizontal:active{background:#2A6CCC url("./bar_vertical.png") center no-repeat;}
/** 空白处颜色:左下角空白 */
::-webkit-scrollbar-corner{background-color:#BED8F5;-webkit-border-radius:1px;}

DEMO地址:http://www.acgist.com/demo/chrome-scrollbar/index.html