html横向滚动条样式
CSS设置滚动条样式(element滚动条样式修改)CSS3 设置滚动条主要有下⾯七个属性:
可以全局设置,也可以对单个div进⾏设置
/* 滚动条整体部分,可以设置宽度等 */
body::-webkit-scrollbar{}
/* 滚动条两端的按钮 */
body::-webkit-scrollbar-button{}
/* 外层轨道 */
body::-webkit-scrollbar-track{}
/* 内层滚动槽 */
body::-webkit-scrollbar-track-piece{}
/* 滚动的滑块 */
body::-webkit-scrollbar-thumb{}
/* 边⾓ */
body::-webkit-scrollbar-corner{}
/* 定义右下⾓拖动块的样式 */
body::-webkit-resizer{}
例如可以按照下⾯直接设置
/* 设置滚动条的样式 */
::-webkit-scrollbar{
width: 5px;
}
/* 滚动条滑块 */
:
:-webkit-scrollbar-thumb{
border-radius: 10px;
background:rgba(117, 146, 168, 1);
-webkit-box-shadow:inset006pxrgba(0, 0, 0, 0.5);
}
/* 内层滚动槽 */
::-webkit-scrollbar-track-piece{
width: 2px;
background:rgba(30, 52, 68, 1);
}
其他的就⾃⼰测试吧。