css 自定义滚动条颜色

css 自定义滚动条颜色

1. div代码。

2. css代码。

设置滚动条颜色:

.div-box {

width: 600px;

height: 200px;

overflow-y: auto;

border: 1px solid #DCDFE6;

margin: 20px;;

scrollbar-arrow-color: #000; /*顶部/底部图标颜色*/

scrollbar-face-color: #333; /*滚动条颜色*/

scrollbar-shadow-color: #999;/*滚动条阴影颜色*/

}

设置滚动条尺寸:

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/

.div-box::-webkit-scrollbar{

width: 16px;

height: 16px;

background-color: #F5F5F5;

}

/*定义滚动条轨道 内阴影+圆角*/

.div-box::-webkit-scrollbar-track{

-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);

border-radius: 10px;

background-color: #F5F5F5;

}

/*定义滑块 内阴影+圆角*/

.div-box::-webkit-scrollbar-thumb{

border-radius: 10px;

-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);

background-color: #555;

}

转载自: https://blog.csdn.net/hanshileiai/article/details/40398177

相关推荐