Vue+Ant-Design-Vue+JeecgBoot项目 滚动条样式 全局设置

项目技术框架：Vue+Ant-Design-Vue+JeecgBoot

 

滚动条全局样式设置，可在public/index.html中添加设置滚动条的样式

/* 滚动条优化 start */
    /* 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸 */
    ::-webkit-scrollbar{
      /* width: 10px;
      height: 10px;
      background-color: #ebebe0; */
      width: 6px;
      height: 6px;
      background-color: transparent;
    }
    /* 定义滚动条轨道 内阴影+圆角 */
    ::-webkit-scrollbar-track{
      -webkit-box-shadow:inset 0 0 6px rgba(139, 136, 136, 0.3)!important;
      border-radius:5px;
      background-color: #f5f5f5;
    }
    /*定义滑块  内阴影+圆角*/
    .input-table .thead::-webkit-scrollbar-thumb, .input-table .thead .tr::-webkit-scrollbar-thumb, .input-table .scroll-view::-webkit-scrollbar-thumb,
    ::-webkit-scrollbar-thumb{
      border-radius: 5px;
      box-shadow: inset 0 0 6px rgba(151, 146, 146, 0.3);
      background-color: #328bdf!important;
    }
    .input-table .thead::-webkit-scrollbar-thumb:hover,
     .input-table .thead .tr::-webkit-scrollbar-thumb:hover,
     .input-table .scroll-view::-webkit-scrollbar-thumb:hover,
    ::-webkit-scrollbar-thumb:hover{
      background-color: #568cb1;
    }
    /* 滚动条优化 end */