滚动条样式设置
有时候我们写的 ::-webkit-scrollbar 被干扰了，导致写了没有效果。
scrollbar-width 和 scrollbar-color 这两个新的属性，很容易导致我们之前常用的滚动条设置都失效。
应默认预设 scrollbar-width 和 scrollbar-color
scss
@mixin scrollbar-clear($name) {
#{$name} {
scrollbar-width: auto !important;
scrollbar-color: unset !important;
}
}
@mixin scrollbar() {
// 移交给专门的混入来完成重设
// scrollbar-width: auto;
// scrollbar-color: unset;
// 滚动条样式
::-webkit-scrollbar {
width: $scrollbar-width;
height: $scrollbar-width;
border-radius: 0;
}
// 滚动条的可拖拽部分（滑块）
::-webkit-scrollbar-thumb {
width: $scrollbar-width;
border-radius: calc($scrollbar-width * 0.5);
background-color: $alice-yellow;
&:hover {
cursor: pointer;
}
&:active {
cursor: grabbing;
background-color: $alice-yellow;
}
}
// 滚动条的滚动区域（轨道）
::-webkit-scrollbar-track {
width: $scrollbar-width;
border-radius: calc($scrollbar-width * 0.5);
background-color: $drill-main-color;
}
::-webkit-scrollbar-track-piece {
width: $scrollbar-width;
background-color: $drill-main-color;
}
::-webkit-scrollbar-button {
display: none;
}
}贡献者
ruan-cat