Rumah > hujung hadapan web > html tutorial > 如何自定义滚动条?_html/css_WEB-ITnose

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

WBOY
Lepaskan: 2016-06-24 11:35:00
asal
965 orang telah melayarinya

滚动条的自定义化,往往在做移动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 
Salin selepas log masuk
61 62
63 64
65 66

效果如下:

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

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Cadangan popular
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan