css怎样设置滚动条的颜色及样式

html-css023

css怎样设置滚动条的颜色及样式,第1张

改变浏览器默认的滚动条样式:

//滚动条凹槽的颜色,还可以设置边框属性

::-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

}