自定义页面滚动条

滚动条提供了以下样式：

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

案例：

HTML

<div class="div_con">
      <div class="div_con_height"></div>
</div>

CSS

.div_con{
    width: 100px;
    height: 300px;
    overflow: hidden;
    overflow-y:scroll;
 　　border: 1px solid #000;
}
.div_con_height{
    width: 100px;
    height: 500px;
}
.div_con::-webkit-scrollbar {/*滚动条整体样式*/

    width: 5px;     /*高宽分别对应横竖滚动条的尺寸*/

    height: 1px;

}

.div_con::-webkit-scrollbar-thumb {/*滚动条里面小方块*/

    border-radius: 5px;

    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);

    background: #535353;

}

.div_con::-webkit-scrollbar-track {/*滚动条里面轨道*/

    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);

    border-radius: 5px;

    background: #fff;

}

注意：直接写样式  ::-webkit-scrollbar 可以修改全局的滚动条（包括默认侧边滚动条）