Vue及Antd组件修改滚动条样式
Vue及Antd组件修改滚动条样式
·
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;
}
更多推荐
已为社区贡献5条内容
所有评论(0)