一、在div中的滚动条样式
div::-webkit-scrollbar {
width: 5px;//滚动条宽度
}
div::-webkit-scrollbar-thumb {
border-radius: 10px;//滚动条圆角
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);//滚动区域底色
opacity: 0.2;//透明度
background: rgba(0, 143, 217, 1);//滚动条背景色
}
div::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);//滚动区域底色
border-radius: 0;
}
二、在Ant表格中的滚动条
::v-deep(.ant-table-body) {
&::-webkit-scrollbar {
//整体样式
width: .041667rem /* 8/192 */;
}
&::-webkit-scrollbar-thumb {
//滑动滑块条样式
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: rgba(31, 53, 115, 0.8);
}
&::-webkit-scrollbar-track {
//轨道的样式
-webkit-box-shadow: 0;
border-radius: 0;
}
}
::v-deep(.ant-table-cell-scrollbar){
box-shadow:none
}