最近想换下项目中滚动条的样式,让滚动条更符合整体页面的风格,于是自己调了一个,效果如下:
直接上代码:
/*滚动条大小*/
::-webkit-scrollbar {
width: 12px;
height:12px;
}
/*滚动区域背景*/
::-webkit-scrollbar-track-piece{
-webkit-border-radius:3px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 0;
background-color: #f5f5f5;
}
/*竖向滚动条*/
::-webkit-scrollbar-thumb:vertical{
height:5px;
background-color: #0fd5ff;
-webkit-border-radius:3px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
}