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

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

fleXcroll.jsを用意します


ここからダウンロード。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でスクロールバーのデザインをカスタマイズします。
ここでは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を使用したスクロールバーのカスタマイズに入ります。


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

準備


ダウンロードして使う場合は、上記サイトの「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;を付加しました。