スクロールバーをCSS、あるいはfleXcroll.jsを使ってデザインカスタマイズする。

Update:

デフォルトのスクロールバーではなく、デザインをカスタマイズしたスクロールバーの実装を依頼されることがあります。しかし、単にCSSで見た目を変えてもChromeやPC版Safariくらいでしか反映されない。そういう時用のメモ。

fleXcroll.jsを用意します

fleXcroll: Cross Browser Custom ScrollBar script by Hesido
A cross-browser javascript that enables you to style your scroll-bars with CSS

ここからダウンロード。3番目の段落がダウンロードです。

デモ用の基本のHTMLを用意します

sample01.Default

比較も兼ねて、まずjsを使用しない、CSSだけの実装サンプルを作ります。

<div class="col-10 mx-auto overflow-auto border" style="height:200px;">
  <h5>sample01.Default</h5>
  <p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
</div>

↑これが↓こうなります。縦方向のスクロールを表示させたいので、外枠のdivにサイズ指定とoverflow-y:scroll;を指定します（※上記はBootstrap4での記述をしています）。

sample01.Default

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

overflow-y: auto;により、PCでは外枠であるdivに指定した高さ150pxより内部の要素がはみ出したらスクロールバーが表示されます。iPhone等ではスクロールバーは表示されず、内側の要素をフリックしてスクロールさせる仕様となっています。

普通にCSSでスクロールバーのデザインをカスタマイズしてみる

sample02.only CSS

CSSでスクロールバーのデザインをカスタマイズする。 | WEMO
スクロールバーのデザインをCSSだけでカスタマイズする方法を具体例を挙げながらまとめていきます。すごく、簡単です。普通にブラウザの右側に出てくるスクロールバーはまだいいですが、コンテンツの中でスクロールさせる要素のスクロールバーがダサすぎて、なんとかしたい人向けです。ちなみに、今回メモするTipsは、-webkit系でのみ有効です。ご了承ください。（FirefoxはスクロールバーをCSSでカスタマイズすることは現状できないようですね。）

ここを参考に、CSSでスクロールバーのデザインをカスタマイズします。
ここではsample01の外枠のdivにカスタマイズ用のclassである.col-scrollbar-test01を追加しています。

<div class="col-10 mx-auto overflow-auto border col-scrollbar-test01" style="height:200px;">
  <h5>sample02.only CSS</h5>
  <p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
</div>

お好きなデザインにCSSを当てていきます。

/* スクロールバーのベース部分 */
.col-scrollbar-test01::-webkit-scrollbar{
  width: 12px;
}
/* スクロールバーのバーの部分 */
.col-scrollbar-test01::-webkit-scrollbar-track{
  background: #fff;
  border: none;
  border-radius: none;
  box-shadow: inset 0 0 2px #777; 
}
/* スクロールバーのツマミの部分 */
.col-scrollbar-test01::-webkit-scrollbar-thumb{
  background: #000;
  border-radius: none;
  box-shadow: none;
}

↑これが↓こうなります。

sample02.only CSS

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

ブラウザチェック
Chrome / PC ○
Safari / PC ○
FireFox / PC ×
デザインは反映されない。デフォルトのスクロールバーのまま。
Edge / PC ○
IE / PC ×
デザインは反映されない。デフォルトのスクロールバーのまま。
Chrome / Android △
デザインは反映される。スクロールバーのツマミで操作はできない。
Chrome / iPhone △
デザインは反映される。スクロールバーのツマミで操作はできない。
Safari / iPhone △
デザインは反映される。スクロールバーのツマミで操作はできない。

CSSのみだと、仕事で使うには厳しいですね……。

fleXcroll.jsとCSSでデザインカスタマイズする

ようやくfleXcroll.jsを使用したスクロールバーのカスタマイズに入ります。

fleXcroll | Webサイト制作支援 | ShanaBrian Website
CSSでデザイン可能なオリジナルスクロールバー「fleXcroll」の使用方法を紹介・掲載しているページです。

こちらのサイトを参考に進めます。

準備

fleXcroll: Cross Browser Custom ScrollBar script by Hesido
A cross-browser javascript that enables you to style your scroll-bars with CSS

ダウンロードして使う場合は、上記サイトの「Download」セクションにダウンロードできるリンクがあります。
ダウンロード後、flexcroll.jsを任意の場所に格納し、読み込みの記述をHTMLに追加してください。

準備が終わったら、スクロールバーを変化させたい要素にclassに.flexcrollを付加します。

sample03.fleXcroll+CSS

今回は外枠のdivからoverflow:auto;（Bootstrapのclassではoverflow-auto）を外します。

<div class="col-10 mx-auto border flexcroll" style="height:200px;">
  <h5>sample03.fleXcroll+CSS</h5>
  <p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
</div>

お好きなデザインにCSSを当てていきます。

.flexcroll {
  position:relative;
}
/* 本体？ */
.scrollgeneric {
  line-height:1px;
  font-size:1px;
  position:absolute;
  top:0;
  left:0;
}
/* 縦スクロール範囲 */
.vscrollerbase {
  width:12px;
  background-color:#c8c8c8;
}
/* 縦スクロールバー */
.vscrollerbar {
  width:10px;
  background-color:#000;
}
/* 横スクロール範囲 */
.hscrollerbase {
  height:10px;
  background-color:#eee;
}
/* 横スクロールバー */
.hscrollerbar {
  height:10px;
  background-color:#900;
}
/* 縦横スクロールバー */
.scrollerjogbox {
  width:10px;
  height:10px;
  top:auto;
  left:auto;
  bottom:0;
  right:0;
  background-color:#c8c8c8;
}

↑これが↓こうなります。

sample03.fleXcroll+CSS

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

ブラウザチェック
Chrome / PC ○
Safari / PC ○
FireFox / PC ○
Edge / PC ○
IE / PC ○
Chrome / Android ○
Chrome / iPhone ○
スクロールバーのツマミ部分でも操作できます……が、スマホでは細すぎて、スクロールバーの以外も触ってしまって、ちょっと挙動として微妙です。調整してみます。
Safari / iPhone ○
スクロールバーのツマミ部分でも操作できます……が、スマホでは細すぎて、スクロールバーの以外も触ってしまって、ちょっと挙動として微妙です。調整してみます。

sample04.fleXcroll+CSS フレームの中を画像にしてみる

外枠のdivにpadding:0;を付加しました。

関連記事: