Heim > Artikel > Web-Frontend > 如何自定义滚动条？_html/css_WEB-ITnose
如何自定义滚动条？_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:35:00892Durchsuche
滚动条的自定义化，往往在做移动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 class="brush:php;toolbar:false">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 61 62 63
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：footer固定在页面底部的若干种方法_html/css_WEB-ITnoseNächster Artikel：html行内元素 和 块状元素 总结_html/css_WEB-ITnose