首页 > 代码库 > 优化浏览器默认scroll样式小技巧

优化浏览器默认scroll样式小技巧

2024-09-11 05:02:48   215人阅读

一个最简单的页面：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>优化scroll</title>
 5     <meta charset="utf-8">
 6     <style type="text/css">
 7         body{
 8             width:2000px;
 9             height: 2000px;
10             margin:0;
11             padding:0;
12         }
13     </style>
14 </head>
15 <body>
16 </body>
17 </html>

显示效果再熟悉不过了：

技术分享

有点丑陋，可以通过css的方式，最快解决这个问题。（是的，不支持IE，及与其内核相关的浏览器）

处理代码如下，注释有说明：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>优化scroll</title>
 5     <meta charset="utf-8">
 6     <style type="text/css">
 7         body{
 8             width:2000px;
 9             height: 2000px;
10             margin:0;
11             padding:0;
12         }
13         /*
14         width可以改变右边滚动条的宽度
15         height可以改变下边滚动条的高度
16         */
17         ::-webkit-scrollbar {
18             width: 9px;
19             height: 9px;
20             box-sizing: border-box;
21         }
22         /*
23         设置了滚动条按钮的样式图标，url我直接用了base64图片，无所谓啦
24         */
25         ::-webkit-scrollbar-button {
26             width: 9px;
27             height: 12px;
28             background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAAUCAYAAADRA14pAAADr0lEQVRYR71Yy04iQRQtE10IRiSBOLbOUvZmfkIlLHXjI+jCDzAm8w8TJKxZyENdqEui8BPuDVtsHCNGQcFEWUzdSt/KtbqqqZ44U0kn1V2n69xz63W6x5h9iXFoNADe521dftnibJlt+7PCjdmycpzz9vbmmvCTk5PzvK0NuNvbWyNuYWEBcbbUX8obSvBgMDAKiUQiUrDLi0nNPC9eYqwFfyWvTvAPHsm1JhqHEl9dXbHV1VUJo4Lv7u6k4JOTE7a5uSlxc3Nz/0ww5VXjR15VMIjFoop2+v2+EAJisaDoaDQqR/j+/l7gjo+PJW5ra0vUZ2dnqWDko1zqM+fi4kL0RxOMMaytrUneXC4ncMhFYzg4OBA4KpiK1Yl2Xl9fXSqWip6ampLEDw8PbrVa9U2S7e1tlkwmdYIBC6J1CXfOz8/ljAHRNIbFxcXs0tJShb/rHB4eShxw0RgymczPVCr1CwWrRCOJeQesVqtJUevr61JwPp+XxHt7e6xYLErc/v6+OqVHJvrl5cWt1+u+BEIMNzc3UvDj46NbqYD2zwViaLfbWsGBU+vs7EwIASIow+GQYSA8e5K4UCgIHBBBeX9/Z+VyWdT5CAliJabApdTr9UR/VDTGQPeO5+dngUMuGgPiQu3S3W7XHR8fl2IxaHjWbDalYAhwYmJCNH98fEht8KzVaukEA8a4WQIvdgKiacJjsZicWZgYwJZKJZlwiGF6etq3hpWk+24dzKAOODMzI4lhrZs6I2t9FB+2+3ghcZjIIF4YCJiFUJA31AjbCrY8N/9aMH2RCrbhDSP4OydKBETZ4W09fn3jV8SAG/Dnv/kFFtS22PC2eGdWOJNg3fnos3iXl5ci6HQ6zTxryVRbeXp6KjAbGxvMYCt1XDQZgpdy0UbV0lI+ikNuk9NCLN21fU4LQXA2ersgbP+fXBZiwG05jqNzWUE7NLwueHVmBxrpLg3c4OwoJ9aR+6udFgvhsugA/DeHZ3JaWi+tOi1q9bxdkHU6nU8uCxwPlkQiEeSjTaKFw8M+1JGmDg+4EUddFsSA3KFGWGcAVlZWBId3zrGnpyff4Z/NZgUmHo+bBIc2Hgqv+Cy14Q61hlUDgNkEcs8AMPXwR8zOzo48/Olc5vWRaxh4qctCsdCPajzAcFBOrI8yHtpdWj2HG42G6G95eZl55yHDLyokOjo6EtXd3V1Gvqh061e3jAAnjAfloi/Tcxi4KR/FIXeYc9jmFwpw2PwGUgY58NaG1/rX0h9d1DUzJEP0JgAAAABJRU5ErkJggg==);
29             background-color: transparent;
30             background-repeat: no-repeat;
31         }
32         /*
33         corner角落的意思，可以改变Y滚动条与X滚动条交叉的右下角的样式
34         */
35         ::-webkit-scrollbar-corner {
36             background-color: #f1f1f1;
37             -webkit-border-radius: 1px;
38         }
39         /*
40         这就是滚动条的样式了
41         */
42         ::-webkit-scrollbar-thumb {
43             background-color: #E7E7E7;
44             border: 1px solid rgba(0,0,0,0.21);
45             -webkit-border-radius: 5px;
46         }
47         /*
48         悬浮时
49         */
50         ::-webkit-scrollbar-thumb:hover {
51             background-color: #F6F6F6;
52             border: 1px solid rgba(0,0,0,0.21);
53         }
54         /*
55         滚动条空白处的样式
56         */
57         ::-webkit-scrollbar-track-piece {
58             background-color: rgba(0,0,0,0.15);
59             -webkit-border-radius: 5px;
60         }
61     </style>
62 </head>
63 <body>
64 </body>
65 </html>

显示效果如下：

技术分享

（好吧，我觉得是好看了那么一点点）

优化浏览器默认scroll样式小技巧


联系
我们