公共滚动条样式(继承)

项目中很多需要滚动条的地方，为了样式统一、代码简洁。所以对滚动条进行了封装，使用的时候用集成的方式

代码

封装

// scrollbar.scss

$theme_main: #2b79ff;
$scroll_bg: transparent;
$scroll_width: 6px;

/* 整个滚动条 */
.scrollbar::-webkit-scrollbar {
  width: $scroll_width;
  height: $scroll_width;
}
/* 滚动条轨道 */
.scrollbar::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 $scroll_width $scroll_bg;
  box-shadow: inset 0 0 $scroll_width $scroll_bg;
  -webkit-border-radius: $scroll_width;
  border-radius: $scroll_width;
}
/* 滚动条上的滚动滑块 */
.scrollbar::-webkit-scrollbar-thumb {
  background: rgba($theme_main, 0.5);
  border-radius: $scroll_width;
  &:hover {
    background: rgba($theme_main, 0.8);
  }
}
/* 滚动条上的按钮 (上下箭头) */
.scrollbar::-webkit-scrollbar-button {
  display: none;
}
/* 当同时有垂直滚动条和水平滚动条时交汇的部分 */
.scrollbar::-webkit-scrollbar-corner {
  background: $scroll_bg;
}

使用

@import '../../../../assets/styles/scrollbar.scss';
.custom-item-box-body {
  margin-top: 34px;
  width: 100%;
  height: calc(100% - 34px);
  overflow: auto;
  @extend .scrollbar;
}