滚动条样式

 

隐藏滚动条

<div class="change_record_box">
      <div class="scrollbar"></div>
</div>

<style lang="scss" scoped>
.change_record_box {
  width: 100%; // 给固定的宽高
  height: 260px;
  overflow-y: scroll;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}
.change_record_box::-webkit-scrollbar {
   display: none; /* Chrome Safari */
 }
</style>

滚动条样式修改

.change_record_box::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.change_record_box::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(138, 136, 136, 0.2);
  background: #7e7d7d;
}
.change_record_box::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(122, 121, 121, 0.2);
  border-radius: 10px;
  background: #ededed;
}
</style>

 想要什么颜色、格式可自行修改

 

tableX轴样式修改

.el-table {
  ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
    width: 10px; /*滚动条宽度*/
    height: 10px; /*滚动条高度*/
  }
  /*定义滚动条轨道 内阴影+圆角*/
  ::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
    box-shadow: 0px 1px 3px #fff inset; /*滚动条的背景区域的内阴影*/
    border-radius: 10px; /*滚动条的背景区域的圆角*/
    background-color: #fff; /*滚动条的背景颜色*/
  }
  /*定义滑块 内阴影+圆角*/
  ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
    box-shadow: 0px 1px 3px #C7BFAF inset; /*滚动条的内阴影*/
    border-radius: 10px; /*滚动条的圆角*/
    background-color: #C7BFAF; /*滚动条的背景颜色*/
  }
}