diff --git a/src/styles/custom.scss b/src/styles/custom.scss index 26b4db3f..35aab632 100644 --- a/src/styles/custom.scss +++ b/src/styles/custom.scss @@ -115,12 +115,14 @@ html.v-overlay-scroll-blocked { // 美化滚动条 ::-webkit-scrollbar { - block-size: 8px; - inline-size: 8px; + block-size: 4px; + inline-size: 4px; + opacity: 0; + transition: opacity 0.3s; } ::-webkit-scrollbar-thumb { - border-radius: 3px; + border-radius: 2px; background: rgb(var(--v-theme-perfect-scrollbar-thumb)); box-shadow: inset 0 0 10px rgba(0,0,0,20%); @@ -131,6 +133,16 @@ html.v-overlay-scroll-blocked { } } +// 当鼠标悬停在可滚动元素上时显示滚动条 +*:hover::-webkit-scrollbar { + opacity: 1; +} + +// 当元素正在滚动时显示滚动条 +*:active::-webkit-scrollbar { + opacity: 1; +} + .v-alert--variant-elevated, .v-alert--variant-flat { background: rgb(var(--v-table-header-background)); color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));