本文共 1270 字，大约阅读时间需要 4 分钟。

 1、在想要滚动条的div上添加innerbox的clas属性即可：

.innerbox{  overflow-x: hidden;  overflow-y: auto;  color: #000;  font-size: .7rem;  font-family: "\5FAE\8F6F\96C5\9ED1",Helvetica,"黑体",Arial,Tahoma;  height: 550px;}/*滚动条样式*/.innerbox::-webkit-scrollbar {/*滚动条整体样式*/  width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/  height: 4px;}.innerbox::-webkit-scrollbar-thumb {/*滚动条里面小方块*/  border-radius: 5px;  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);  background: #c0c4cc;}.innerbox::-webkit-scrollbar-track {/*滚动条里面轨道*/  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);  border-radius: 0;  background: rgba(0,0,0,0.1);}

2、滚动条css属性介绍

/* 滚动条 */::-webkit-scrollbar-thumb:horizontal { /*水平滚动条的样式*/    width: 4px;    background-color: #CCCCCC;    -webkit-border-radius: 6px;}::-webkit-scrollbar-track-piece {    background-color: #fff; /*滚动条的背景颜色*/    -webkit-border-radius: 0; /*滚动条的圆角宽度*/}::-webkit-scrollbar {    width: 10px; /*滚动条的宽度*/    height: 8px; /*滚动条的高度*/}::-webkit-scrollbar-thumb:vertical { /*垂直滚动条的样式*/    height: 50px;    background-color: #999;    -webkit-border-radius: 4px;    outline: 2px solid #fff;    outline-offset: -2px;    border: 2px solid #fff;}::-webkit-scrollbar-thumb:hover { /*滚动条的hover样式*/    height: 50px;    background-color: #9f9f9f;    -webkit-border-radius: 4px;}

转载地址：http://lvtbi.baihongyu.com/