antdesign表格自定义滚动条样式

最近使用umi+ant design写个后台管理系统，设计稿滚动条样式挺好看的，

关于滚动条的一些属性作个记录，设计稿样式(由于涉及公司信息，因此数据仍是不要显示了)

ant design中表格的滚动条样式

//
:global { //修改框架样式关键字
    //表格头标题的滚动条设置
    // 为何设置标题头滚动条呢，由于ant中表格直接引入在umi中，显示滚动条，表头也会显示
    // 我看了生成后的表格元素，发现它是表头其实也是个表格，而后取表格的thead部分设置，
    // 表体又是一个表格，而后取tbody设置
    .ant-table-header{
        border-right: #2F2F2F;
        //滚动条总体部分
        &::-webkit-scrollbar {
            width: 6px;//y轴滚动条粗细
            height: 6px;//x轴滚动条粗细
            border-bottom: 1px solid #7B7B7B;
        }
        
        //滚动条里面的小方块，能上下左右移动（取决因而垂直滚动条仍是水平滚动条）
        &::-webkit-scrollbar-thumb {
            border-radius: 8px;
            -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);       
            background: #949494;
            margin-bottom: 10px;
        }
        //滚动条的轨道（里面装有thumb）滚动槽
        &::-webkit-scrollbar-track {
            -webkit-box-shadow: 0;
            border-radius: 0;
            background: #4D4D4B;//滚动槽背景色
            border-radius: 10px;//滚动条边框半径设置
        }
    }
    //表格体的滚动条设置
     .ant-table-body{
            border-right: #2F2F2F;
            //滚动条总体部分
            &::-webkit-scrollbar {
                width: 6px;//y轴滚动条粗细
                height: 6px;//x轴滚动条粗细
                border-bottom: 1px solid #7B7B7B;
            }
            
            //滚动条里面的小方块，能上下左右移动（取决因而垂直滚动条仍是水平滚动条）
            &::-webkit-scrollbar-thumb {
                border-radius: 8px;
                -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);       
                background: #949494;
                margin-bottom: 10px;
            }
            //滚动条的轨道（里面装有thumb）滚动槽
            &::-webkit-scrollbar-track {
                -webkit-box-shadow: 0;
                border-radius: 0;
                background: #4D4D4B;//滚动槽背景色
                border-radius: 10px;//滚动条边框半径设置
            }
        }
}复制代码