【React】Ant Design 5.x版本table scroll滚动条样式自定义

陀螺蚁

于 2024-05-25 14:34:39 发布

阅读量779

点赞数 10

分类专栏： Web前端 # React 文章标签： react.js 前端前端框架

本文链接：https://blog.csdn.net/u011159821/article/details/139197222

版权

Web前端同时被 2 个专栏收录

41 篇文章 2 订阅

订阅专栏

React

19 篇文章 0 订阅

订阅专栏

新版里table的滚动条样式由:scrollbar-width、scrollbar-color接管，导致之前的伪类方式失效！

环境

antd: ^5.14.1
react: ^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);
}