ホームページ  >  記事  >  ウェブフロントエンド  >  スクロールバーをカスタマイズするにはどうすればよいですか? _html/css_WEB-ITnose

スクロールバーをカスタマイズするにはどうすればよいですか? _html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 11:35:00938ブラウズ

モバイル Web を実行する場合、スクロール バーのカスタマイズにより多くのスタイルがプロジェクトに追加されることがよくあり、それに -webkit-overflow-scrolling: touch; の効果と同じ効果があります。ここでは、iOS スタイルを模倣したカスタム スクロール バーのデモが提供されています:

 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 (バックグラウンド グルーブ) プロパティでスクロール バーを定義します。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事:page_html/css_WEB-ITnose の下部にあるフッターを修正するいくつかの方法次の記事:page_html/css_WEB-ITnose の下部にあるフッターを修正するいくつかの方法

関連記事

続きを見る