/* 设置滚动条的扰运样式 */::-webkit-scrollbar {width: 12px;}/* 滚动槽 */::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);border-radius: 10px;}/* 滚动条滑块缓销梁斗早 */::-webkit-scrollbar-thumb {border-radius: 10px;background: rgba(0,0,0,0.1);-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);}::-webkit-scrollbar-thumb:window-inactive {background: rgba(255,0,0,0.4);}
写个实例demo吧不能光说不练。CSS也很信宽简单。/* 设置滚动条的样式 */::-webkit-scrollbar {width: 12px;}/* 滚动槽 */::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);笑衫border-radius: 10px;}/* 滚动条滑块 */::-webkit-scrollbar-thumb {border-radius: 10px;background: rgba(0,0,0,0.1);-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);}::-webkit-scrollbar-thumb:window-inactive {background: 碰坦腔rgba(255,0,0,0.4);}
::-webkit-scrollbar{width:14px;}
::-webkit-scrollbar-track{background-color:#bee1eb;}
::-webkit-scrollbar-thumb{background-color:#00aff0;}
::-webkit-scrollbar-thumb:hover {background-color:#9c3}
::-webkit-scrollbar-thumb:active {background-color:#00aff0}这段代码放倒CSS文件里去，宽度颜纤明色自己修改，且只在webkit内核浏览器下才埋陆生效，就是谷歌浏览器的内核。毁液告
目前只有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
}
以上就是土嘎嘎小编大虾米为大家整理的滚动条样式按钮_css设置div滚动条样式相关主题介绍,如果您觉得小编更新的文章对您有所帮助，不要忘记讲本站分享给您身边的朋友哦！！