☰

網頁XY卷軸美化

XY卷軸美化+自定義scrollbar better customize

当前为 2024-01-30 提交的版本，查看 最新版本。

/* ==UserStyle==
@name           網頁XY卷軸美化
@namespace      1
@version        1.7
@description    XY卷軸美化+自定義scrollbar better customize
@author         Leadra
@license MIT
@preprocessor   stylus
@var color      scroll_border               "卷軸框色"                            rgba(7, 5, 255, .5)
@var color      scroll_background    "卷軸背景色"                        rgba(200, 200, 250)
@var color      scroll_move                  "卷軸移入背景色"              rgb(68, 136, 238,1)
@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-color: rgba(0, 0, 0, 0);
}
/*背景*/
  ::-webkit-scrollbar-track {    
      box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0);
}

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

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

::-webkit-scrollbar-corner {
    background-color: rgba(0, 0, 0, 0);
}