滾動條的自定義化，往往在做移動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 width: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 width: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！