如何自定义滚动条?

滚动条的自定义化,往往在做移动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>

效果如下:

如何自定义滚动条?_第1张图片

主要使用的是::-webkit-scrollbar(凹槽),::-webkit-scrollbar-thumb(拖动块),::-webkit-scrollbar-track(背景槽)的属性来定义滚动条,good,加个链接,忽略掉它,哈哈,http://t.cn/RUbL4rP!

你可能感兴趣的:(如何自定义滚动条?)