全局改变滚动条样式

全局改变滚动条样式

---

全局样式文件

base.scss

/* 设置滚动条的样式 */
::-webkit-scrollbar {
    @include setScrollbar($width: 6px, $height: 6px);
}
::scrollbar {
    @include setScrollbar($width: 6px, $height: 6px);
}
/* 滚动槽 */
::-webkit-scrollbar-track {
    @include setScrollbarTrack();
}
::scrollbar-track {
    @include setScrollbarTrack();
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
    @include setScrollbarThumb($radius: 10px, $color: #006666, $shadowWidth: 1px);
}
::scrollbar-thumb {
    @include setScrollbarThumb($radius: 10px, $color: #006666, $shadowWidth: 1px);
}

mixin.scss

@mixin setScrollbar($width:null,$height:null) {
  width:$width;
  height: $height;  
}

@mixin setScrollbarTrack {
  display: none;
}

@mixin setScrollbarThumb($radius:null,$color:null,$shadowWidth:null) {
  border-radius: $radius;
  background: $color;
  -webkit-box-shadow:inset 0 0 $shadowWidth $color;
}

生成样式

markdown在线编辑器网站——https://www.zybuluo.com