滚动条样式

css 笔记

设置滚动条样式

.el-card-box{
   scrollbar-arrow-color: #000; /*顶部/底部图标颜色*/
    scrollbar-face-color: #333; /*滚动条颜色*/
    scrollbar-shadow-color: #999;/*滚动条阴影颜色*/
}
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
.el-card-box::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  background-color: #f5f5f5;
}

/*定义滚动条轨道 内阴影+圆角*/
.el-card-box::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  background-color: #f5f5f5;
}

/*定义滑块 内阴影+圆角*/
.el-card-box::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: rgba(0, 0, 0, 0.2);
}