标签：.com 设置 back shc rgba avl jta via 分享
一个最简单的页面：
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>
显示效果如下：
（好吧，我觉得是好看了那么一点点）
标签：.com 设置 back shc rgba avl jta via 分享
原文地址：http://www.cnblogs.com/wuzhiquan/p/6641153.html
