css修改横向滚动条样式_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);}

写个实例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);}

目前只有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

}