谷歌浏览器滚动条样式优化
发表于:2022-04-21 | 分类: 前端
字数统计: 136 | 阅读时长: 1分钟 | 阅读量:
众所周知 谷歌浏览器默认的滚动条很丑 -.-| ,在项目中非常影响美观,还好可以使用 css 样式控制,代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/*滚动条样式:谷歌浏览器下*/
::-webkit-scrollbar {
width: 8px;
height: 8px;
background-color: transparent;
}

/*滚动条的轨道*/
::-webkit-scrollbar-track {
background-color: #18354c;
border: 1px solid rgba(92, 151, 219, 1);
border-radius: 4px;
padding: 0 1px;
}

/*滚动条的滑块按钮*/
::-webkit-scrollbar-thumb {
border-radius: 3px;
width: 6px;
height: 6px;
background-color: #5c97db;
}

/*滚动条的上下两端的按钮*/
::-webkit-scrollbar-button {
height: 0;
width: 0;
}
上一篇:
原生HTML-table表格,超出内容鼠标悬浮展示
下一篇:
记录一下好用的Js技巧(新手向大佬勿喷)