自定义滚动条样式

Posted 2020-08-09 肖建春

<style>
/*
* 控制ie 滚动条颜色
* scrollbar-face-color 滚动条颜色
*/
div{
scrollbar-face-color: #DDDDDD;
scrollbar-shadow-color: #DDDDDD;
scrollbar-highlight-color: #DDDDDD;
scrollbar-3dlight-color: #DDDDDD;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-base-color: #DDDDDD;
scrollbar-track-color: #FFFFFF;
scrollbar-arrow-color: #FFFFFF;
}
－－－－－－－－－－－－－－－－以下是控制webkit滚动条样式－－－－－－－－－－－－－－－－
/**
* 控制滚动条颜色
*/
::-webkit-scrollbar-track-piece{
background-color:#FFFFFF;/* 空出来的颜色 */
-webkit-border-radius:0;
}
/**
* 宽度
*/
::-webkit-scrollbar{
width:12px; /* 设置滚动条宽度 */
}
/**
*Handle样式
*/
::-webkit-scrollbar-thumb{
background-color:#DDDDDD;/* 滚动条颜色 */
-webkit-border-radius:10px;/*圆角*/
}
/*当前窗口未激活的情况下*/
::-webkit-scrollbar-thumb:window-inactive {
background-color:#DDDDDD;
}
/*
*鼠标移上去后的颜色
*/
::-webkit-scrollbar-thumb:vertical:hover{
background-color:#BBBBBB;
}

</style>