备注:这玩意兼容代码太难找了,这个做了兼容,谷歌和火狐没啥问题
效果:
LESS文件:
div {
width: 100%;
height: 100px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-arrow-color: #f0d1a2;
/**/
/*三角箭头的颜色*/
scrollbar-face-color: #f0d1a2;
/**/
/*立体滚动条的颜色*/
scrollbar-3dlight-color: transparent;
/**/
/*立体滚动条亮边的颜色*/
scrollbar-highlight-color: transparent;
/**/
/*滚动条空白部分的颜色*/
scrollbar-shadow-color: transparent;
/**/
/*立体滚动条阴影的颜色*/
scrollbar-darkshadow-color: transparent;
/**/
/*立体滚动条强阴影的颜色*/
scrollbar-track-color: #f0d1a2;
/**/
/*立体滚动条背景颜色*/
scrollbar-base-color: transparent;
/**/
/*滚动条的基本颜色*/
&::-webkit-scrollbar {
width: 1px;
background-color: #7a110d;
}
&::-webkit-scrollbar-track {
background-color: #7a110d;
border-radius: 2px;
}
&::-webkit-scrollbar-thumb {
background: #f0d1a2;
border-radius: 0.02rem;
}
&::-webkit-resizer {
height: 0.23rem;
width: 0.07rem;
}
&::-webkit-scrollbar-thumb:hover {
background: #f0d1a2;
}
&::-webkit-scrollbar-corner {
background: #179a16;
}
}
CSS文件:
div {
width: 100%;
height: 100px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-arrow-color: #f0d1a2;
/**/
/*三角箭头的颜色*/
scrollbar-face-color: #f0d1a2;
/**/
/*立体滚动条的颜色*/
scrollbar-3dlight-color: transparent;
/**/
/*立体滚动条亮边的颜色*/
scrollbar-highlight-color: transparent;
/**/
/*滚动条空白部分的颜色*/
scrollbar-shadow-color: transparent;
/**/
/*立体滚动条阴影的颜色*/
scrollbar-darkshadow-color: transparent;
/**/
/*立体滚动条强阴影的颜色*/
scrollbar-track-color: #f0d1a2;
/**/
/*立体滚动条背景颜色*/
scrollbar-base-color: transparent;
/**/
/*滚动条的基本颜色*/
}
div::-webkit-scrollbar {
width: 1px;
background-color: #7a110d;
}
div::-webkit-scrollbar-track {
background-color: #7a110d;
border-radius: 2px;
}
div::-webkit-scrollbar-thumb {
background: #f0d1a2;
border-radius: 0.02rem;
}
div::-webkit-resizer {
height: 0.23rem;
width: 0.07rem;
}
div::-webkit-scrollbar-thumb:hover {
background: #f0d1a2;
}
div::-webkit-scrollbar-corner {
background: #179a16;
}