スクロールバーを装飾したい・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">


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