diff --git a/resources/assets/sass/scrollbar.scss b/resources/assets/sass/scrollbar.scss index e4cdb13f9..da3bc5699 100644 --- a/resources/assets/sass/scrollbar.scss +++ b/resources/assets/sass/scrollbar.scss @@ -1,24 +1,32 @@ +/* 滚动条美化 */ .scrollbar-overlay { overflow-y: auto; overflow-y: overlay; -webkit-overflow-scrolling: touch; - /* 滚动条美化 */ + /* 滚动条尺寸 */ &::-webkit-scrollbar { - width: 12px; - height: 12px; + width: 0; + height: 0; } /*滚动条滑块隐藏*/ &::-webkit-scrollbar-thumb { + border: 3px solid transparent; + background-color: rgba(0, 0, 0, .2); + background-clip: content-box; border-radius: 12px; - background: rgba(0, 0, 0, 0); - } + /*让该容器的滚动条滑块显示*/ + &:hover { + border: 2px solid transparent; + background-color: rgba(0, 0, 0, .2); + } - /*按下滚动条,颜色加深*/ - &::-webkit-scrollbar-thumb:active { - border-radius: 12px; - background: rgba(0, 0, 0, .5); + /*按下滚动条,颜色加深*/ + &:active { + border: 2px solid transparent; + background-color: rgba(0, 0, 0, .4); + } } /*滚动条轨道*/ @@ -29,29 +37,14 @@ /*鼠标浮到容器上*/ &:hover { - /*让该容器的滚动条滑块显示*/ - &::-webkit-scrollbar-thumb { - border: 3px solid transparent; - background: rgba(0, 0, 0, .2); - background-clip: content-box; - } - - /*让该容器的滚动条滑块显示*/ - &::-webkit-scrollbar-thumb:hover { - border: 2px solid transparent; - background: rgba(0, 0, 0, .2); - background-clip: content-box; - } - - /*按下滚动条,颜色加深*/ - &::-webkit-scrollbar-thumb:active { - border: 2px solid transparent; - background: rgba(0, 0, 0, .5); - background-clip: content-box; + &::-webkit-scrollbar { + width: 12px; + height: 12px; } } } +/* 滚动条隐藏 */ .scrollbar-hidden { &::-webkit-scrollbar { display: none;