Vue及Antd组件修改滚动条样式

小龙狗

于 2022-07-14 15:32:51 发布

阅读量3.9k

点赞数 5

分类专栏： Web编程文章标签： vue.js css css3 antd

本文链接：https://blog.csdn.net/shylonegirl/article/details/125785290

版权

Web编程专栏收录该内容

29 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了如何使用CSS样式定制滚动条的外观，包括宽度、高度、背景颜色和圆角等属性，并展示了针对Select下拉菜单和Table组件滚动条的特定样式设置，以达到与Ant Design框架的视觉一致性。

摘要由CSDN通过智能技术生成

1. CSS样式

.scrollContent {
  &::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 4px;
    height: 4px;
    background: #663399;
  }
  
  &::-webkit-scrollbar-track {
  
    background: none;
  }
  
  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 3px;
    background-color: #cd00cd;
  }
}

2. Select 下拉菜单滚动条

.ant-select-dropdown-menu::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 9px;
  height: 9px;
  background: #663399;
}
.ant-select-dropdown-menu::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 9px;
  background-color: #cd00cd;
}

3. Table 下拉菜单滚动条

// 滚动条背景颜色
/deep/ .ant-table-body::-webkit-scrollbar,
.info::-webkit-scrollbar {
  height: 9px;
  width: 9px;
  background-color: #3498db7e;
}

// 滚动条颜色
/deep/ .ant-table-body::-webkit-scrollbar-thumb,
.info::-webkit-scrollbar-thumb {
  border-radius: 9px;
  background-color: #3498db;
}