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

facebook
twitter

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

1 HTML
2 CSS

HTML

<div class="scrollArea">
  ～スクロールさせるコンテンツ～
</div>
<!--//scrollArea-->

～スクロールさせるコンテンツ～

</div>

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

CSS

.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;
}

.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

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

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