CSSでスクロールバーの装飾をしよう!

  • はてブ

img
スクロールバーを装飾したい・safariで見た際に常にスクロールバーを表示させたい…という時、手軽に実現させる方法として『::-webkit-scrollbar』があります。
装飾した表示はChromeとsafariのみになってしまいますが、数行のCSSを加えるだけで簡単に実現できます。


HTML


まず、スクロールさせるコンテンツを囲みます。

CSS


高さ指定をして『overflow: auto;』で要素をスクロールさせます。
次にスクロールバー自体の装飾の指定をしていきます。

::-webkit-scrollbar

⇒これでスクロールバーの横幅の指定ができます。もし横スクロールの場合は『width』を『height』に変更します。


::-webkit-scrollbar-track

⇒スクロールバーの背景の色と、角丸指定ができます。


::-webkit-scrollbar-thumb

⇒スクロールバー自体の色と、角丸指定ができます。

これで完成です。

DEMO

style="display:block"
data-ad-client="ca-pub-4667789978705365"
data-ad-slot="9480048027"
data-ad-format="auto">



気軽にできますので、ぜひ試してみてください。

工藤

執筆者: 工藤

日々勉強中です。どうぞよろしくお願いします。

株式会社8bit (エイトビット)

東京都渋谷区でWebサイト制作、Webシステム開発などを行っております。
キャンペーンサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

制作に関するご相談はお気軽にどうぞ

コンペ参加や相談ベースでもご相談承っております。

お問い合わせ