一个最简单的页面：

 <!DOCTYPE html>

 <html>

 <head>

     <title>优化scroll</title>

     <meta charset="utf-8">

     <style type="text/css">

         body{

             width:2000px;

             height: 2000px;

             margin:0;

             padding:0;

         }

     </style>

 </head>

 <body>

 </body>

 </html>

显示效果再熟悉不过了：

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

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

 <!DOCTYPE html>

 <html>

 <head>

     <title>优化scroll</title>

     <meta charset="utf-8">

     <style type="text/css">

         body{

             width:2000px;

             height: 2000px;

             margin:0;

             padding:0;

         }

         /*

         width可以改变右边滚动条的宽度

         height可以改变下边滚动条的高度

         */

         ::-webkit-scrollbar {

             width: 9px;

             height: 9px;

             box-sizing: border-box;

         }

         /*

         设置了滚动条按钮的样式图标，url我直接用了base64图片，无所谓啦

         */

         ::-webkit-scrollbar-button {

             width: 9px;

             height: 12px;

             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==);

             background-color: transparent;

             background-repeat: no-repeat;

         }

         /*

         corner角落的意思，可以改变Y滚动条与X滚动条交叉的右下角的样式

         */

         ::-webkit-scrollbar-corner {

             background-color: #f1f1f1;

             -webkit-border-radius: 1px;

         }

         /*

         这就是滚动条的样式了

         */

         ::-webkit-scrollbar-thumb {

             background-color: #E7E7E7;

             border: 1px solid rgba(0,0,0,0.21);

             -webkit-border-radius: 5px;

         }

         /*

         悬浮时

         */

         ::-webkit-scrollbar-thumb:hover {

             background-color: #F6F6F6;

             border: 1px solid rgba(0,0,0,0.21);

         }

         /*

         滚动条空白处的样式

         */

         ::-webkit-scrollbar-track-piece {

             background-color: rgba(0,0,0,0.15);

             -webkit-border-radius: 5px;

         }

     </style>

 </head>

 <body>

 </body>

 </html>

显示效果如下：

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

优化浏览器默认scroll样式小技巧的更多相关文章

  1. css样式小技巧

    1.css样式小技巧 HTML怎样设定使背景图片不随页面滚动而滚动 background-attachment:fixed; 2.实现li a 超过长度内容出现省略号… overflow:hidden ...

  2. JavaScript中if语句优化和部分语法糖小技巧推荐

    前言 在前端日常开发过程中,if else判断语句使用的次数应该是比较频繁的了,一些较为复杂的场景,可能会用到很多判断,在某个代码块使用很多if else时,代码会显得较为冗余,阅读起来不够清晰. 除 ...

  3. 优化webpack构建时间的小技巧

    在之前工作的地方,我们一直使用webpck去构建.但是,经过长达四年的更新迭代,每个人都在同一个项目中做了不同的操作和更新,这导致我们生产构建时间达到了惊人的一分半,watch模式的rebuild也达 ...

  4. CSS改变浏览器默认滚动条样式

    前言 最近总是看到某网站滚动条不是浏览器默认样式,而是自定义样式   比如我博客的滚动条,自定义滚动条样式和hover前后的效果 顿时来了兴致和有一个疑问,这是怎么实现的呢? 解决   注:经测试,目 ...

  5. 优化C/C++代码的小技巧

    说明: 无意看到一篇小短文,猜测作者应该是一个图形学领域的程序员或专家,介绍了在光线(射线)追踪程序中是如何优化C/C++代码的.倒也有一些参考意义,当然有的地方我并不赞同或者说我也不完全理解,原文在 ...

  6. 【CSS3】---样式小技巧

    水平居中设置-定宽块状元素 当被设置元素为块状元素时用 text-align:center 就不起作用了,这时也分两种情况:定宽块状元素和不定宽块状元素.这一小节我们先来讲一讲定宽块状元素. 满足定宽 ...

  7. 优化C/C++代码的小技巧（转）

    源:http://www.cnblogs.com/lizhenghn/p/3969531.html 说明: 无意看到一篇小短文,猜测作者应该是一个图形学领域的程序员或专家,介绍了在光线(射线)追踪程序 ...

  8. 修改chrome浏览器默认css样式的方法

    最近重新用起了ubuntu kylin,然后又碰到之前让我感到有些难受的一个小问题:用chrome浏览部分网页时,一部分粗体字十分难看,就像是宋体直接加粗那样. 之前就觉得这样看起来很难受,但是找到的 ...

  9. 浏览器默认样式(user agent stylesheet)+cssreset

    每种浏览器都有一套默认的样式表,即user agent stylesheet,在写网页时,没有指定的样式,按浏览器内置的样式表来渲染.这是合理的,像word中也有一些预留样式,可以让我们的排版更美观整 ...

随机推荐

  1. leetcode486

    public class Solution { public bool PredictTheWinner(int[] nums) { // int n = nums.Length; // int[,] ...

  2. Centos7下快速安装Mongo3.2

    Centos7下快速安装Mongo3.2 一般安装Mongo推荐源码安装,有时候为了快部署测试环境,或者仅仅是想装个mongo shell,这时候yum安装是最合适的方式, 下面介绍一下如何在Cent ...

  3. ubuntu14.10下Qt5.4无法输入中文

    最近学习Qt,于是在ubuntu下安装了开发环境.我是从官网上下载安装的Qt5.4版本.安装后发现在开发过程中无法输入中文.于是在网上搜了搜.解决办法如下: 1.安装fcitx-frontend-qt ...

  4. Logstash安装和设置（图文详解）（多节点的ELK集群安装在一个节点就好）

    前提 Elasticsearch-2.4.3的下载(图文详解) Elasticsearch-2.4.3的单节点安装(多种方式图文详解) Elasticsearch-2.4.3的3节点安装(多种方式图文 ...

  5. bash&nbsp;shell笔记6&nbsp;脚本控制

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://twentyfour.blog.51cto.com/945260/522415 知 ...

  6. 动态绑定事件-on

    动态绑定事件 $(document).on("各种事件(如click.mousemove...)","事件对象(比如我点击class为.close的div,那么这里就是. ...

  7. NetworkView

    [游戏Server中Server的类别] There are two common and proven approaches to structuring a network game which ...

  8. ParksLink修改密码

    设置环境变量: ?set classpath=D:\ptc\PartsLink\srclib\jmxcore\WtLogR.jar;D:\ptc\PartsLink\srclib\log4j.jar; ...

  9. Leetcode:Container With Most Water分析和实现

    题目大意是提供n个非负整数,a1,...,an,可以将其理解为多个边界(垂直的线段),其中ai处于x坐标i处,并且ai代表的线段高度即为ai的值.要求我们取这样的i与j,使得ai与aj以及x坐标轴围成 ...

  10. 2014蓝桥杯B组初赛试题《李白打酒》

    题目描述: 话说大诗人李白,一生好饮.幸好他从不开车.     一天,他提着酒壶,从家里出来,酒壶中有酒2斗.他边走边唱: 无事街上走,提壶去打酒.     逢店加一倍,遇花喝一斗.     这一路上 ...