/*覆盖默认滚动条样式*/
::-webkit-scrollbar,scrollbar
{ border-radius: 15px;
width: 10px;
height: 130px;
background-color: #fff;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #343084;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #436dc7;
width: 10px;
height: 130px;
}
这里要注意的是 如果你只是这么写 那么 你整个页面的滚动条都会使用这个样式
那样会很丑 所以 如果你想修改局部的滚动条样式 请在上面的css里 添加限制 比如
/*覆盖默认滚动条样式*/
.conentleft ::-webkit-scrollbar,scrollbar
{ border-radius: 15px;
width: 10px;
height: 130px;
background-color: #fff;
}
/*定义滚动条轨道 内阴影+圆角*/
.conentleft ::-webkit-scrollbar-track{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #343084;
}
/*定义滑块 内阴影+圆角*/
.conentleft ::-webkit-scrollbar-thumb{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #436dc7;
width: 10px;
height: 130px;
}
这样 所修改的滚动条 就只是 class=‘conentleft’里的滚动条样式了