滚动条的自定义化，往往在做移动web的时候，能为我们的项目增添不少风采，而且通过为其添加-webkit-overflow-scrolling : touch; 的css属性，使其有着如同ios系统浏览器中bounce的效果，这里的话，提供一个仿ios风格自定义滚动条的demo，代码如下：
1 <html> 2 <head> 3 <title>自定义滚动条</title> 4 <meta charset="utf8"/> 5 <style> 6 #scrollbar{ 7 width:450px; 8 height:300px; 9 margin:100px auto; 10 border: 1px #eee solid; 11 background-color:#eee; 12 display:inline-block; 13 overflow: auto; 14 -webkit-overflow-scrolling : touch; 15 } 16 /*凹槽宽度*/ 17 #scrollbar::-webkit-scrollbar{ 18 width:8px; 19 height:8px; 20 } 21 /*拖动条*/ 22 #scrollbar::-webkit-scrollbar-thumb{ 23 background-color:#ccc; 24 border-radius:6px; 25 } 26 /*背景槽*/ 27 #scrollbar::-webkit-scrollbar-track{ 28 background-color:#ddd; 29 border-radius:6px; 30 } 31 </style> 32 </head> 33 <body> 34 <div id="scrollbar"> 35 <code> 36 <pre> 37 #scrollbar{ 38 200px; 39 height:200px; 40 margin:100px auto; 41 border: 1px #eee solid; 42 background-color:#eee; 43 display:inline-block; 44 } 45 /*凹槽宽度*/ 46 #scrollbar::-webkit-scrollbar{ 47 8px; 48 height:8px; 49 } 50 /*拖动条*/ 51 #scrollbar::-webkit-scrollbar-thumb{ 52 background-color:ragb(0,0,0,0.3); 53 border-radius:6px; 54 } 55 /*背景槽*/ 56 #scrollbar::-webkit-scrollbar-track{ 57 background-color:#ddd; 58 border-radius:6px; 59 } 60 </pre> 61 </code> 62 <img src="http://p2.sinaimg.cn/1134235113/180/61721259911787" alt=""> <br> 63 <img src="http://p2.sinaimg.cn/1134235113/180/61721259911787" alt=""> 64 </div> 65 </body> 66 </html>
效果如下：
主要使用的是::-webkit-scrollbar（凹槽），::-webkit-scrollbar-thumb（拖动块），::-webkit-scrollbar-track（背景槽）的属性来定义滚动条，good，加个链接，忽略掉它，哈哈，http://t.cn/RUbL4rP！