如何自定义滚动条？_html/css_WEB-ITnose
- WBOY원래의
- 2016-06-24 11:35:00938검색
滚动条的自定义化，往往在做移动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
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.