網頁XY卷軸美化

XY卷軸美化+自定義scrollbar better customize
换行
/* ==UserStyle==
@name           網頁XY卷軸美化
@namespace      https://gf.qytechs.cn/zh-TW/users/4839
@version        1.7.3
@description    XY卷軸美化+自定義scrollbar better customize
@author         Leadra
@license MIT
@preprocessor   stylus
@var color      scroll_border               "卷軸框色"                            rgba(115, 100, 255, 1)
@var range     scroll_bordersize        "卷軸框"                       [2, 0, 5, 1, "px"]
@var color      scroll_background    "卷軸背景色"                        rgba(200, 200, 250)
@var color      scroll_move                  "卷軸移入背景色"              rgb(68, 136, 238,1)
@var color      scroll_bar                      "背景色"                                 rgba(0,0,0,0)
@var range     scroll_radius                "卷軸圓滑度"                       [5, 0, 15, 1, "px"]
@var range     scroll_wh                       "卷軸寬高"                           [10, 0, 20, 1, "px"]

==/UserStyle== */

//針對新版chrome在YT框架內優先設定
html {
  scrollbar-color: auto !important;
  scrollbar-width: auto !important;
}

::-webkit-scrollbar {
    width: scroll_wh !important;
    height: scroll_wh !important;
    background: rgba(0, 0, 0, 0);
}
/*背景*/
  ::-webkit-scrollbar-track {    
      box-shadow: inset 0 0 0 5px scroll_bar;
}

/*卷軸*/
::-webkit-scrollbar-thumb {
    border: scroll_bordersize solid scroll_border !important;//#48e
    background: scroll_background !important;
    border-radius: scroll_radius!important;
}

/*卷軸移入*/
::-webkit-scrollbar-thumb:hover {
    background: scroll_move !important;
}

::-webkit-scrollbar-corner {
    background: rgba(0, 0, 0, 0);
}
/*
chrome 在 121版 引入firefox的 scrollbar-width 特性 這個之前在Firefox才有
scrollbar-width 只有 auto, thin, none 三種選擇
範例:
scrollbar-color: var(--main-color, #c1c1c1) rgba(0, 0, 0, 0) !important;
scrollbar-width: auto ;
*/
欢迎访问Greasy Fork镜像
