CSS⾃定义滚动条
此改动仅适⽤于webkit浏览器和⽕狐，想写ie的，另外再搜吧（搜个⽑线，正经⼈谁写_）通过⾃定义可以实现滚动条的样式改动，⽀持悬浮放⼤等。关于滚动条的介绍，详见
当然，通过隐藏滚动条，使⽤标签来模拟滚动条可以做到更好的效果。
这⾥是scss写的，道理就是这么个道理，有需要的话，改成less、css之类的⼀样⽤
// 这⾥把element-ui的样式过滤掉了
$bar-width: 6px;
$bar-height: 8px;
$bar-hover-width: .8rem;
$bar-hover-height: 1rem;
$track-bg: #0000;
$track-hover-bg: #0000;
$thumb-bg: rgba(223, 223, 223, .6);
$thumb-hover-bg: rgba(221, 221, 221, 1);
*:not(.scrollbar-wrapper){
// webkit
// 滚动条
::-webkit-scrollbar{
width: $bar-width;
height: $bar-height
}
// 滚动轨道
::-webkit-scrollbar-track{
background-color: $track-bg;
css设置表格滚动条}
// ⽤来拖动的那个东东
::-webkit-scrollbar-thumb{
background-color: $thumb-bg;
border-radius: $bar-width / 2;
}
&:hover{
&::-webkit-scrollbar{
width: $bar-hover-width;
height: $bar-hover-height;
}
&::-webkit-scrollbar-track{
background-color: $track-hover-bg;
}
&::-webkit-scrollbar-thumb{
border-radius: $bar-hover-width / 2;
background-color: $thumb-hover-bg;
}
}
// ⽕狐
scrollbar-width: thin;
scrollbar-color: $thumb-bg $track-bg; // 前景⾊，背景⾊
&:hover{
scrollbar-width: thin;
scrollbar-color: $thumb-hover-bg $track-hover-bg; // 前景⾊，背景⾊
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。