MENU

今回はスクロールバーのデザインをCSSだけでカスタマイズしていこうと思います。すごく簡単です。

普通にブラウザの右側に出てくるスクロールバーは見慣れているので気にならないもの、コンテンツの中でスクロールさせたい時にでてくるスクロールバーのダサさが気になりすぎて。

 

目次

スクロールバーをカスタマイズする時の基本知識

以下のサイトがすごく詳しくまとめてくれています。

WebKitを使ってスクロールバーをカスタマイズ

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

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

以上の3要素だけです。

カスタマイズ例

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

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

ページのスクロールバーは独特なものにしすぎても逆にわかりにくいので、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: transparent;
  border-radius: 10px;
  box-shadow: inset 0 0 2px 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;
}

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

 

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

- Thank you for reading this to the end. -
TOPへ Top