网页默认的滚动条不怎么好看，特别是对于网页内部元素使用滚动条时，默认样式就更加显得格格不入。
对于滚动条的样式设置，调整以下一个属性的值即可。
::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的
::-webkit-scrollbar-button 滚动条两端的按钮
::-webkit-scrollbar-track 外层轨道
::-webkit-scrollbar-track-piece 内层滚动槽
::-webkit-scrollbar-thumb 滚动的滑块
::-webkit-scrollbar-corner 边角
::-webkit-resizer 定义右下角拖动块的样式
举个栗子：
.content{width:300px;height:300px;overflow: hidden;overflow-y: scroll;background-color:00FFFF;border:1pxsolid000;
}.contentHeight{width:500px;height:500px;
}
以上样式规定，当内容大于父级框架尺寸时，纵向出现滚动条。
开始对滚动条进行设置：
.content::-webkit-scrollbar{/*滚动条整体样式*//*高宽分别对应横竖滚动条的尺寸*/height:50px;width:5px;
}.content::-webkit-scrollbar-thumb{/*滚动条里面小方块*/border-radius:5px;-webkit-box-shadow: inset005pxrgba(0,0,0,0.2);background:535353;
}.content::-webkit-scrollbar-track{/*滚动条里面轨道*/-webkit-box-shadow: inset005pxrgba(0,0,0,0.2);border-radius:5px;background:fff;
}.content::-webkit-scrollbar-button{width:6px;height:6px;background-color: red;
}
自定义滚动条样式