css修改整个项目的滚动条样式

在项目中，滚动条不可避免的要出现。设置统一规范的滚动条也是必然。用一个独立的css文件即可修改整个项目中的滚动条样式 。

 

scrollBar.css:

/* 滚动条有滑块的轨道部分 */
::-webkit-scrollbar-track-piece {
    background-color: #00000000;
    border-radius: 0;
}

/* 整个滚动条 */
::-webkit-scrollbar {
    width: 8px;
}

/* 滚动条竖向滑块 */
::-webkit-scrollbar-thumb:vertical {
    background-color: rgba(255, 255, 255, .1);
    border-radius: 2px;
}

/* 滚动条竖向滑块hover */
::-webkit-scrollbar-thumb:vertical:hover {
    background-color: rgba(255, 255, 255, .2);
    border-radius: 4px;
}

/* 滚动条横向滑块 */
::-webkit-scrollbar-thumb:horizontal {
    background-color: rgba(255, 255, 255, .1);
    border-radius: 2px;
}

/* 滚动条横向滑块hover */
::-webkit-scrollbar-thumb:horizontal:hover {
    background-color: rgba(255, 255, 255, .2);
    border-radius: 4px;
}

/* 同时有垂直和水平滚动条时交汇的部分 */
::-webkit-scrollbar-corner {
    display: block;    /* 修复交汇时出现的白块 */
}