スクロールバーを装飾したい・safariで見た際に常にスクロールバーを表示させたい…という時、手軽に実現させる方法として『::-webkit-scrollbar』があります。
装飾した表示はChromeとsafariのみになってしまいますが、数行のCSSを加えるだけで簡単に実現できます。
HTML
|
1 2 3 4 |
<div class="scrollArea"> ～スクロールさせるコンテンツ～ </div> <!--//scrollArea--> |
まず、スクロールさせるコンテンツを囲みます。
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.scrollArea{ height: 200px; overflow: auto; padding-right: 20px; } /*スクロールバーの横幅指定*/ .scrollArea.deco::-webkit-scrollbar { width: 15px; } /*スクロールバーの背景色・角丸指定*/ .scrollArea.deco::-webkit-scrollbar-track { border-radius: 10px; background: #f2f2f2; } /*スクロールバーの色・角丸指定*/ .scrollArea.deco::-webkit-scrollbar-thumb { border-radius: 10px; background:#09C9D9; } |
高さ指定をして『overflow: auto;』で要素をスクロールさせます。
次にスクロールバー自体の装飾の指定をしていきます。
::-webkit-scrollbar
⇒これでスクロールバーの横幅の指定ができます。もし横スクロールの場合は『width』を『height』に変更します。::-webkit-scrollbar-track
⇒スクロールバーの背景の色と、角丸指定ができます。::-webkit-scrollbar-thumb
⇒スクロールバー自体の色と、角丸指定ができます。これで完成です。
DEMO
気軽にできますので、ぜひ試してみてください。
