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

一个最简单的页面：

 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>

显示效果如下：

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

转载于:https://www.cnblogs.com/wuzhiquan/p/6641153.html

优化浏览器默认scroll样式小技巧相关推荐

xp下优化OpenGL模式运行速度的小技巧
转发一个xp下优化OpenGL模式运行速度的小技巧,修改工具已经传上了从一个linux论坛看来,原本用于让linux跑war3流畅些,一直没有在windows中使用过.晚上在XP里试验了一下成功了, ...
网站内部优化的4个细节小技巧
内部优化就是对网站内容和链接的优化工作,做好内部优化对网站的排名和权重提升有着重要的作用.但对于网站内部优化,很多优化人员也没有明确的优化方向和方案,导致网站内部优化很麻烦.很复杂,那是他们还没有找到 ...
safari浏览器横屏怎么设置_Safari浏览器的几个小技巧你掌握了吗？
众所周知,Safari浏览器是iPhone中最好用的APP之一,功能十分丰富,而且操作十分便捷,那么Safari浏览器到底怎么使用才能更加快捷方便呢?那接下来就为大家介绍几个 Safari的实用小技巧 ...
html 将盒子固定浏览器,浏览器默认css样式表 css之左盒子固定,右盒子自适应的一种实现方式...
浏览器默认css样式表在页面布局或者是列表布局中,我们经常出现一个场景:左边是固定宽度的盒子,右边自适应:div>label>Open... maoguiyou 2016年09月13日 ...
safari 浏览器提示添加到主屏幕_Safari浏览器的几个小技巧你掌握了吗？
众所周知,Safari浏览器是iPhone中最好用的APP之一,功能十分丰富,而且操作十分便捷,那么Safari浏览器到底怎么使用才能更加快捷方便呢?那接下来就为大家介绍几个 Safari的实用小技巧 ...
高效使用浏览器的5个小技巧,第1个技巧最实用
浏览器是大家常用的软件工具之一,看似简单的浏览器其实蕴含着许多令人想不到的功能,这些功能很实用.使用浏览器的这些小技巧,可以更高效率完成好工作.下面一起来看看浏览器的5个使用小技巧,第一个技巧最实用. ...
谷歌关键词优化：谷歌推广的小技巧-大舍传媒
谷歌关键词优化:谷歌推广的小技巧-大舍传媒关键词优化:谷歌推广的小技巧谷歌搜索推广是时下出口型企业选择比较多的推广方式,那麼,要想得到好一点的推广预期效果,一定要掌握一定的推广方式.易外贸为大家分 ...
表单单选多选项清除默认样式小技巧
工作中做项目都会遇到表单单选.多选项的样式问题,对于一个刚入行的菜鸟来说,可能不知道如何修改很low的选项默认样式,下表给初学者提供了改变默认样式的小技巧首先要清除默认样式,非常简单的css: i ...
嘘，Python 优化提速的 8 个小技巧
Python 是一种脚本语言,相比 C/C++ 这样的编译语言,在效率和性能方面存在一些不足.但是,有很多时候,Python 的效率并没有想象中的那么夸张.本文对一些 Python 代码加速运行的技巧 ...

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

优化浏览器默认scroll样式小技巧相关推荐

最新文章

热门文章