CSS改变overflow滚动条样式【开箱即用】

CSS改变overflow滚动条样式【开箱即用】

.el-table__body-wrapper {
    /* 滚动条 */
    &::-webkit-scrollbar {
      width: 8px;
    }
    /* 滚动槽 */
    &::-webkit-scrollbar-track {
      border-radius: 8px;
      background: rgba(0, 0, 0, 0.05);
    }
    /* 滚动条滑块 */
    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background: #cfcece;
    }
}

效果如果所示，也可以自己随意改变

因公司需求，做了好多的表格。列表之类的
然后就避免不了的有数据超出高度，就需要做分页显示，或者加一个滚动条
奈何自带的滚动条样式不符合要求
百度时好时坏，为了避免找不到又记不住的风险，干脆自己重新记录一下，也供别的小伙伴参考【开箱即用】