需求,滚动条宽度太小,不方便操作,希望hover之后滚动条变大
滚动条滑块是由背景颜色和border共同渲染的。
完整代码:
&::-webkit-scrollbar {
width: 12px;
height: 12px;
}
&::-webkit-scrollbar-thumb {
background-color: #dadce0;
border-radius: 10px;
border-style: dashed;
border-color: transparent; // 滚动
border-width: 3px; // 往内压缩时注意 外部的宽高和这个宽高是否合适,否则有可能导致内压缩宽度不够显示不出来
background-clip: padding-box; // 背景将被限制在内容和边距之内,往内压缩
}
&::-webkit-scrollbar-thumb:hover {
background: #888; // 注意设置的不是background-color,二者有区别
}