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

Pocket
LINEで送る

デフォルトのスクロールバーではなく、デザインをカスタマイズしたスクロールバーの実装を依頼されることがあります。しかし、単に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を使用したスクロールバーのカスタマイズに入ります。

sample03.fleXcroll+CSS


ここを参考にします。今回はfleXcroll.jsを当てるので、外枠のdivのclassに.flexcrollを付加します。
また、今回は外枠の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;を付加しました。

Pocket
LINEで送る

back to top