你的位置:首页 > 网页设计

[网页设计]如何自定义滚动条?


滚动条的自定义化,往往在做移动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(背景槽)的属性来定义滚动条!