自定义滚动条样式及element ui的滚动条样式

一般情况

// 设置滚动条的宽度
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
  width: 10px;
}
// 设置滚动条的背景色和圆角
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb  {
  background-color: pink;
  border-radius: 8px;
}

特殊情况，如在火狐浏览器上述操作改变不了时

• 在html中引入nicescroll插件

<script src="../../../../public/jquery.nicescroll.min.js"></script>

• 在vuemounted中设置滚动条

    //滚动条插件
    $('.el-table__body-wrapper').niceScroll({
      cursorcolor: "#1e8151", //#CC0071 光标颜色
      cursoropacitymax: 1, //改变不透明度非常光标处于活动状态（scrollabar“可见”状态），范围从1到0
      touchbehavior: false, //使光标拖动滚动像在台式电脑触摸设备
      cursorwidth: "5px", //像素光标的宽度
      cursorborder: "1px solid #1e8151", // 游标边框css定义
      cursorborderradius: "5px", //以像素为光标边界半径
      autohidemode: true //是否隐藏滚动条
    });

另外：普通溢出的滚动条加类scroll设置如下

/*修改滚动条*/
.scroll {
    scrollbar-color: #f0f0f0;
    /* 第一个方块颜色，第二个轨道颜色(用于更改火狐浏览器样式) */
    scrollbar-width: thin;
    /* 火狐滚动条无法自定义宽度，只能通过此属性使滚动条宽度变细 */
    -ms-overflow-style: none;
}

::-webkit-scrollbar {
    width: 5px;//这是竖向滚动条的宽度。如果是横向滚动条则设置height
    height: 5px;
}
::-webkit-scrollbar-thumb {
    border-radius: 2px;
    background: #4BB86E !important;
}
::-webkit-scrollbar-track {
    width: 5px!important;//这是竖向滚动条的宽度。如果是横向滚动条则设置height
    background: #f0f0f0;
    border-radius: 3px;
}
/*修改滚动条结束*/