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サービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

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

弊社に制作をご依頼いただく際の費用感をご確認いただける、
見積りシミュレーションをご用意いたしました。

工藤

執筆者: 工藤

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