html滚动条美化

样式代码

<style type="text/css">
.rc{
   /*要设置滚动条的容器样式*/
 }
 .rc::-webkit-scrollbar {/*滚动条整体样式*/
   width: 2px;     /*高宽分别对应横竖滚动条的尺寸*/
   height: 1px;
 }
 .rc::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
   border-radius: 10px;
   -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
   background: #535353;
 }
 .rc::-webkit-scrollbar-track {/*滚动条里面轨道*/
   -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
   border-radius: 10px;
   background: #EDEDED;
 }
</style>

界面调用

<div class="rc" style="width:100%;height:135px;overflow:auto;">
	<div style="height:300px;"></div>
</div>

滚动条效果