css自定义滚动条样式(修改原生滚动条样式)

最新推荐文章于 2024-07-18 13:56:09 发布

DLGDark

最新推荐文章于 2024-07-18 13:56:09 发布

阅读量560

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/dlgdark/article/details/112861835

版权

CSS 滚动条自定义样式表格网页设计

关键词由CSDN通过智能技术生成

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

可根据自己实际情况进行单独修改即可。
（.tableHeight）为父级的类名，可改成自己的即可。
代码如下：

/* 整个滚动条 */
.tableHeight
  .el-table--scrollable-y
  .el-table__body-wrapper::-webkit-scrollbar {
  width: 6px;
}
/* 滚动条轨道 */
.tableHeight
  .el-table--scrollable-y
  .el-table__body-wrapper::-webkit-scrollbar-track {
  border-radius: 4px;
  opacity: 0;
}
/* 滚动条没有滑块的轨道部分 */
.tableHeight
  .el-table--scrollable-y
  .el-table__body-wrapper::-webkit-scrollbar-track-piece {
  width: 6px;
}
/* 滚动条上的滚动滑块 */
.tableHeight
  .el-table--scrollable-y
  .el-table__body-wrapper::-webkit-scrollbar-thumb {
  transition: all 0.2s;
  /* border-radius: 4px; */
  background-color: rgba(144, 147, 153, 0.3);
}
/* 滚动条上的按钮 (上下箭头) */
.tableHeight
  .el-table--scrollable-y
  .el-table__body-wrapper::-webkit-scrollbar-button {
  height: 0;
}