首頁 > web前端 > html教學 > 如何自定义滚动条?_html/css_WEB-ITnose

如何自定义滚动条?_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 11:35:00
原創
965 人瀏覽過

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

效果如下:

主要使用的是::-webkit-scrollbar(凹槽),::-webkit-scrollbar-thumb(拖动块),::-webkit-scrollbar-track(背景槽)的属性来定义滚动条!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門推薦
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板