XY卷軸美化+自定義scrollbar better customize
/* ==UserStyle==
@name 網頁XY卷軸美化
@namespace https://greasyfork.org/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 ;
*/