antdv中table组件滚动条样式修改

滚动条的组成:
::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar-thumb 滚动条里面的小方块,能上下左右移动(取决于是垂直滚动条还是水平滚动条)
::-webkit-scrollbar-track 滚动条的轨道(里面装有thumb)
::-webkit-scrollbar-button 滚动条轨道两端的按钮,允许通过点击微调小方块的位置
::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分(除去)
::-webkit-scrollbar-corner 边角,及两个滚动条的交汇处
::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

用法: 

/deep/.ant-table-body{
        &::-webkit-scrollbar {//整体样式
          height: 12px;
        }
        &::-webkit-scrollbar-thumb {//滑动滑块条样式
          border-radius: 2px;
          -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
          background: #eff1f7;
        }
        &::-webkit-scrollbar-track {//轨道的样式
          -webkit-box-shadow: 0;
          border-radius: 0;
          background: #f6f8ff;
        }
}

你可能感兴趣的:(css,css3,html)