🐵
【css】スクロールバーのデザインをcssで変更する
1.縦スクロールのデザイン
1-1.htmlを記述する
<div id="scroll-layout-x">
<ul>
<li>北海道</li>
<li>青森県</li>
<li>岩手県</li>
<li>宮城県</li>
<li>秋田県</li>
<li>山形県</li>
<li>福島県</li>
<li>茨城県</li>
<li>栃木県</li>
<li>群馬県</li>
<li>埼玉県</li>
<li>千葉県</li>
<li>東京都</li>
<li>神奈川県</li>
<li>新潟県</li>
<li>富山県</li>
<li>石川県</li>
<li>福井県</li>
<li>山梨県</li>
<li>長野県</li>
<li>岐阜県</li>
<li>静岡県</li>
<li>愛知県</li>
<li>三重県</li>
<li>滋賀県</li>
<li>京都府</li>
<li>大阪府</li>
<li>兵庫県</li>
<li>奈良県</li>
<li>和歌山県</li>
<li>鳥取県</li>
<li>島根県</li>
<li>岡山県</li>
<li>広島県</li>
<li>山口県</li>
<li>徳島県</li>
<li>香川県</li>
<li>愛媛県</li>
<li>高知県</li>
<li>福岡県</li>
<li>佐賀県</li>
<li>長崎県</li>
<li>熊本県</li>
<li>大分県</li>
<li>宮崎県</li>
<li>鹿児島県</li>
<li>沖縄県</li>
</ul>
</div>
1-2.cssを記述する
#scroll-layout-x{
height: 200px;
overflow-x: auto;
}
#scroll-layout-x::-webkit-scrollbar{
width: 8px;
background-color: #666666;
}
#scroll-layout-x::-webkit-scrollbar-thumb {
background: #ffffff;
border: 1px solid #666666;
border-radius: 4px;
}
- height、もしくはmax-heightを指定する。
- スクロールバーの太さは-webkit-scrollbarのwidthで指定。
1-3.サンプル
2.横スクロールのデザイン
2-1.htmlを記述する
<div id="scroll-layout-x">
<ul>
<li>北海道</li>
<li>青森県</li>
<li>岩手県</li>
<li>宮城県</li>
<li>秋田県</li>
<li>山形県</li>
<li>福島県</li>
<li>茨城県</li>
<li>栃木県</li>
<li>群馬県</li>
<li>埼玉県</li>
<li>千葉県</li>
<li>東京都</li>
<li>神奈川県</li>
<li>新潟県</li>
<li>富山県</li>
<li>石川県</li>
<li>福井県</li>
<li>山梨県</li>
<li>長野県</li>
<li>岐阜県</li>
<li>静岡県</li>
<li>愛知県</li>
<li>三重県</li>
<li>滋賀県</li>
<li>京都府</li>
<li>大阪府</li>
<li>兵庫県</li>
<li>奈良県</li>
<li>和歌山県</li>
<li>鳥取県</li>
<li>島根県</li>
<li>岡山県</li>
<li>広島県</li>
<li>山口県</li>
<li>徳島県</li>
<li>香川県</li>
<li>愛媛県</li>
<li>高知県</li>
<li>福岡県</li>
<li>佐賀県</li>
<li>長崎県</li>
<li>熊本県</li>
<li>大分県</li>
<li>宮崎県</li>
<li>鹿児島県</li>
<li>沖縄県</li>
</ul>
</div>
2-2.cssを記述する
#scroll-layout-x{
width: 500px;
overflow-y: auto;
}
#scroll-layout-y::-webkit-scrollbar{
height: 8px;
background-color: #666666;
}
#scroll-layout-y::-webkit-scrollbar-thumb {
background: #ffffff;
border: 1px solid #666666;
border-radius: 4px;
}
- width、もしくはmax-widthを指定する。
- スクロールバーの太さは-webkit-scrollbarのheightで指定。
Discussion