Dashboard icon indicating copy to clipboard operation
Dashboard copied to clipboard

Edge浏览器中,滚动栏的样式有些不太合适

Open fxzxmicah opened this issue 1 year ago • 5 comments

这是扩展的: image 这是Github的(Github应该使用的是默认样式?不太确定): image

fxzxmicah avatar Nov 18 '23 16:11 fxzxmicah

去看了一下,应该是Edge样式改版后的问题。 可以尝试在全局CSS注入一下代码

body { overflow-x: hidden; }
body::-webkit-scrollbar {  width: 14px !important; }
body::-webkit-scrollbar-track {  
  background-color: #fff !important;
}
body::-webkit-scrollbar-thumb {
  background: #8b8b8b !important;
  border: 3px solid #fff !important;
  border-radius: 7px !important;
}

上面一些宽度、颜色可以自己再微调

image

这个只是尽量看上去看原生的滚动条一样,因为样式表设置过滚动条样式后,滚动条无法通过覆盖代码恢复默认,详情请看这个:https://superuser.com/questions/380629/is-there-a-way-to-disable-custom-webkit-scrollbars

leon-kfd avatar Nov 20 '23 01:11 leon-kfd

另外一般来说起始页应该不会出现滚动条,若页面内容过多可试试多标签功能,按“下”方向键切换下一个页面

leon-kfd avatar Nov 20 '23 01:11 leon-kfd

另外一般来说起始页应该不会出现滚动条,若页面内容过多可试试多标签功能,按“下”方向键切换下一个页面

确实是一般情况不应该出现,一般出现在调整窗口大小的时候,这时候出现了就会有些丑。

为了省事,直接隐藏掉了: body::-webkit-scrollbar { display: none !important; }

fxzxmicah avatar Nov 20 '23 03:11 fxzxmicah

这个问题我觉得即使不是bug,也应该是一个需要优化的点。

fxzxmicah avatar Jan 22 '24 07:01 fxzxmicah

在线版已修改,基于Edge后续有原生悬浮滚动条,Edge浏览器当前会使用默认的滚动条样式。

image

Edge下可访问以下在线版Demo试试 https://www.howdz.xyz/?preview=BTJ08

leon-kfd avatar Jan 22 '24 08:01 leon-kfd