首頁 > 開發者 > JavaScript
如何自訂捲軸？，自訂捲軸?
捲軸的自訂化，往往在做移動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（背景槽）的屬性來定義捲軸！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
