vue css实现漂亮的滚动条

效果图

HTML代码

 <el-col :span="8" class="rg-table">
 	<div class="eps-header">
          <span class="add_title">基本信息</span>
    </div>
    <div class="rg-table-box" v-if="gpsState">
    </div>
 </el-col>
    

CSS样式

		.rg-table-box::-webkit-scrollbar {
          /*整体样式*/
          width: 10px; 
          height: 2px;
        }
         .rg-table-box::-webkit-scrollbar-track {
          /*轨道*/
          box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
          background: #ededed;
          border-radius: 10px;
        }
        .rg-table-box::-webkit-scrollbar-thumb {
          /*滚动条小方块*/
          border-radius: 10px;
          background-color: #2e75d3;
          background-image: -webkit-linear-gradient(
            45deg,
            rgba(255, 255, 255, 0.2) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.2) 50%,
            rgba(255, 255, 255, 0.2) 75%,
            transparent 75%,
            transparent
          );
        }