改变浏览器默认的滚动条样式:
//滚动条凹槽的颜色,还可以设置边框属性
::-webkit-scrollbar-track-piece {
background-color:#f8f8f8
}
//滚动条的宽度
::-webkit-scrollbar {
width:9px
height:9px
}
//滚动条的设置
::-webkit-scrollbar-thumb {
background-color:#dddddd
background-clip:padding-box
min-height:28px
}
::-webkit-scrollbar-thumb:hover {
background-color:#bbb
}
扩展资料:
给某个div,class为test1加滚动条样式:
.test1::-webkit-scrollbar {
width: 8px
}
.test1::-webkit-scrollbar-track {
background-color:red
-webkit-border-radius: 2em
-moz-border-radius: 2em
border-radius:2em
}
.test1::-webkit-scrollbar-thumb {
background-color:green
-webkit-border-radius: 2em
-moz-border-radius: 2em
border-radius:2em
}
目前只有chrome支持设置滚动条样式,给div设置伪类
::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的
::-webkit-scrollbar-button 滚动条两端的按钮
::-webkit-scrollbar-track 外层轨道
::-webkit-scrollbar-track-piece 内层滚动槽
::-webkit-scrollbar-thumb 滚动的滑块
::-webkit-scrollbar-corner 边角
::-webkit-resizer 定义右下角拖动块的样式
如div::-webkit-scrollbar{
width:4px
}