1. div代码。
2. css代码。
.div-box {
width: 600px;
height: 200px;
overflow-y: auto;
border: 1px solid #DCDFE6;
margin: 20px;
}
.box1::-webkit-scrollbar{
height: 20px;
width: 20px;
}
设置滚动条颜色:
.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