滚动条样式自定义

事情是这样的 在一个风和日丽的上午 我和小伙伴完成了一个后台项目的所有需求 老板说要参与测试

好嘛 还是用他自己的笔记本打开的后台 不知道是电脑原因还是浏览器问题 那个滚动条简直细成一条线一直点不到滚动条 叫老板用滚轮 他说滚轮坏掉了 让把进度条加粗 来活了

我直接一个

::-webkit-scrollbar{
  height: 3vh;
  background-color: #f1f1f1;
}

发现没生效 原来是用了less预编译器 那得穿透一下 为了不影响页面的其他滚动条 前面最好加上选择器

/deep/.el-table__body-wrapper::-webkit-scrollbar{
  height: 3vh;
  background-color: #f1f1f1;
}

完成后 再加上滚动栏里面的滑块样式就可以了

/deep/.el-table__body-wrapper::-webkit-scrollbar-thumb{
  background-color: #c1c1c1;
  border-radius: 30px;
}

来点花里胡哨的样式

/deep/.el-table__body-wrapper::-webkit-scrollbar-thumb{
  background-color: #51ace9;
  border-radius: 30px;
  background-image: -webkit-linear-gradient(50deg,
            rgba(255, 255, 255, 0.3) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.3) 50%,
            rgba(255, 255, 255, 0.3) 75%,
            transparent 75%,
            transparent);
}

有点丑O.0