スクロールバーのデザインをCSSだけでカスタマイズする方法を具体例を挙げながらまとめていきます。すごく、簡単です。

普通にブラウザの右側に出てくるスクロールバーはまだいいですが、コンテンツの中でスクロールさせる要素のスクロールバーがダサすぎて、なんとかしたい人向けです。

ちなみに、今回メモするTipsは、-webkit系でのみ有効です。ご了承ください。(FirefoxはスクロールバーをCSSでカスタマイズすることは現状できないようですね。)

 

目次

-webkit-scrollbarでスクロールバーをカスタマイズできる

-webkit-scrollbarというプロパティを指定することで、スクロールバーのデザインはカスタマイズ可能です。

簡単なカスタマイズには簡単な知識だけしか必要ないと思うので、実際に私が扱った要素だけ紹介します。

  • ::-webkit-scrollbar
  • ::-webkit-scrollbar-track
  • ::-webkit-scrollbar-thumb

以上の3要素だけで、ある程度スクロールバーをカスタマイズできます。

-webkit-scrollbarについて、詳しくはこちらのサイト(「WebKitを使ってスクロールバーをカスタマイズ」)がすごく詳しくまとめてくれています。

 

実際のカスタマイズ例

では、実際にどう記述すればどうなるか。

まずは 当サイト全体で使用しているスクロールバーの実装方法から紹介します。

ページのスクロールバーは独特なものにしすぎても逆にわかりにくいので、Macのスクロールバーを真似て作りました。

Windowではよりシンプルに。Macでは見慣れたもののままで違和感なく。

::-webkit-scrollbar{
  width: 10px;
}
::-webkit-scrollbar-track{
  background: #fff;
  border-left: solid 1px #ececec;
}
::-webkit-scrollbar-thumb{
  background: #ccc;
  border-radius: 10px;
  box-shadow: inset 0 0 0 2px #fff;
}

 

もう一つ、少し特殊なスクロールバーデザインの例を。

当サイトでソースコードを表示する preタグに使用しているスクロールバー

pre::-webkit-scrollbar{
  height: 10px;
}

pre::-webkit-scrollbar-track{
  background: transparent;
  border:none;
}

pre::-webkit-scrollbar-thumb{
  background: rgba(#fff,0.1);
  border-radius: 10px;
  box-shadow: inset 0 0 4px rgba(255,255,255,0.8);
}

/* このコメントはスクロールさせるために書いています。スクロールさせてみてくださーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーい。 */

こんなのも

枠も丸くしたいなら。下のような感じ。







| 

| 

| 

| 

| 

| 

| 

| 

このソースは以下です。

div::-webkit-scrollbar{
  width: 12px;
}
div::-webkit-scrollbar-track{
  background: #fff;
  border: none;
  border-radius: 10px;
  box-shadow: inset 0 0 2px #777; 
}
div::-webkit-scrollbar-thumb{
  background: #aaa;
  border-radius: 10px;
  box-shadow: none;
}

他にも好きなようにアレンジしてみてください。

 

また、スマホでのスクロールに慣性をつけてなめらかにする方法もメモしていますので、こちらも是非参考にしてみてください。

スマホ(iOS)でoverflowのスクロールをスムーズにするCSS、-webkit-overflow-scrollingスマホ(iOS)でoverflowのスクロールをスムーズにするCSS、-webkit-overflow-scrolling
- Thank you for reading. -

あなたの1クリックが励みになります\( ̄ー ̄)/

コメント

コメントする

CAPTCHA


TOPへ Top