CSS自定义滚动条

html内容

<div class="testScrollbar">
测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条
</div>

默认样式

 .testScrollbar {
    height: 300px;
    width: 200px;
    background-color: #ccc;
    padding: 5px;
    overflow: auto;
 }

默认滚动条效果

自定义滚动条 css

/*滚动条整体样式,高宽分别对应横竖滚动条的尺寸*/
 .testScrollbar::-webkit-scrollbar {
   width: 5px;
   height: 2px;
   border-radius: 5px;
   background-color: #eee;
 }

 /*滚动条里面小方块*/
 .testScrollbar::-webkit-scrollbar-thumb {
   border-radius: 5px;
   -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
   background: rgba(0, 0, 0, 0.2);
 }

 /*滚动条里面轨道*/
 .testScrollbar::-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);
 }

自定义滚动条样式后的效果图