新版里table的滚动条样式由:
scrollbar-width
、scrollbar-color
接管,导致之前的伪类方式失效!
环境
antd
: ^5.14.1react
: ^18
解决方案:
若想延续伪类方式修改滚动条样式,可以在定义伪类样式文件里加入以下片段:
.ant-table-body {
scrollbar-width: auto;
scrollbar-color: auto;
}
完整设置如下:
.ant-table-body {
scrollbar-width: auto;
scrollbar-color: auto;
}
::-webkit-scrollbar {
width: 5px;
height: 5px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
background: rgba(0, 0, 0, 0.1);
-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgb(219, 219, 219);
}
效果: