Home > Article > Web Front-end > 如何自定义滚动条？_html/css_WEB-ITnose
如何自定义滚动条？_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:35:00894browse
滚动条的自定义化，往往在做移动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
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：footer固定在页面底部的若干种方法_html/css_WEB-ITnoseNext article：html行内元素 和 块状元素 总结_html/css_WEB-ITnose