CSS样式更改滚动条的样式

一：webkit下面的CSS设置滚动条

主要有下面7个属性

::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的
::-webkit-scrollbar-button 滚动条两端的按钮
::-webkit-scrollbar-track 外层轨道
::-webkit-scrollbar-track-piece 内层滚动槽
::-webkit-scrollbar-thumb 滚动的滑块
::-webkit-scrollbar-corner 边角
::-webkit-resizer 定义右下角拖动块的样式

效果图：

css样式

*滚动调样式*/
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-button{
    display: none;
}
::-webkit-scrollbar-thumb{
    height: 50px;
    background-color: #999;
    outline: 2px solid white;
    outline-offset: -2px;
    border: 2px solid white;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}