全域性改變滾動條樣式

全域性樣式檔案

/* 設定滾動條的樣式 */
::-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