ebike-plus-ui/src/style/global-scrollbar.scss

46 lines
1.0 KiB
SCSS
Raw Normal View History

2024-09-03 18:44:15 +08:00
// 设置滚动条的样式
::-webkit-scrollbar {
width: 6px;
2025-01-09 20:34:07 +08:00
height: 6px;
2024-09-03 18:44:15 +08:00
}
// 基于 WebKit 内核的浏览器
// 设置滚动条的样式,宽、圆角、背景颜色
::-webkit-scrollbar-thumb {
width: 6px;
2025-01-09 20:34:07 +08:00
height: 6px;
2024-09-04 00:09:58 +08:00
background-color: $color-border-3;
2025-01-08 23:14:07 +08:00
border-radius: 6px;
2024-09-03 18:44:15 +08:00
}
2025-01-08 23:14:07 +08:00
2024-09-03 18:44:15 +08:00
// 设置滚动条hover样式宽、圆角、背景颜色
::-webkit-scrollbar-thumb:hover {
width: 6px;
2025-01-09 20:34:07 +08:00
height: 6px;
2024-09-04 00:09:58 +08:00
background-color: $color-border-4;
2024-09-03 18:44:15 +08:00
}
// 设置IE/Edge浏览器滚动条的样式与webkit内核浏览器样式相同
::-ms-scrollbar-thumb {
width: 6px;
2025-01-09 20:34:07 +08:00
height: 6px;
2024-09-04 00:09:58 +08:00
background-color: $color-border-3;
2025-01-08 23:14:07 +08:00
border-radius: 6px;
2024-09-03 18:44:15 +08:00
}
::-ms-scrollbar-thumb:hover {
width: 6px;
2025-01-09 20:34:07 +08:00
height: 6px;
2024-09-04 00:09:58 +08:00
background-color: $color-border-4;
2024-09-03 18:44:15 +08:00
}
2025-01-16 00:22:49 +08:00
// arco滚动条样式
// 横向
.arco-scrollbar-thumb-direction-horizontal .arco-scrollbar-thumb-bar {
2025-01-16 15:35:01 +08:00
height: 4px !important;
2025-01-16 00:22:49 +08:00
}
// 纵向
.arco-scrollbar-thumb-direction-vertical .arco-scrollbar-thumb-bar {
2025-01-16 15:35:01 +08:00
width: 4px !important;
2025-01-16 00:22:49 +08:00
}