スクロールバーのデザインをカスタマイズする方法

こんにちはヨシハルです。

上記のお悩みを解決していきます。

高さを指定したエリアやモーダルウィンドウ内でスクロールバーを表示する際、デフォルトのスクロールバーだとデザインが合わない場合があるので変更したいですよね。

Chrome・SafariではCSSでもスクロールバーの変更はできますが、IEなどのブラウザには対応していません。

そんな悩みを解決してくれるのが、jQueryプラグイン「jQuery custom content scroller」です。

jQuery custom content scrollerについて

スクロールバーをカスタマイズできるjQueryプラグイン。

jQuery custom content scroller

必要なファイル

必要なファイルをダウンロードかCDNから読み込みます。

ダウンロードして読み込む方法

下記のサイトから「Code」をクリックして「Download ZIP」をクリックしてダウンロードしてください。

ダウンロード

CSSファイル「jquery.mCustomScrollbar.min.css」
jsファイル「jquery.mCustomScrollbar.concat.min.js」

ダウンロードした上記ファイルを任意のファルダへ移動してください。

<!--css-->
<link rel="stylesheet" href="css/jquery.mCustomScrollbar.min.css">
<!--js-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/jquery.mCustomScrollbar.concat.min.js" type="text/javascript"></script>

※大元のjquery.min.jsファイルは今回使用するjsよりも必ず前で読み込んでください。

・CDNから読み込む方法

<!--css-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.mcustomscrollbar/3.0.6/jquery.mCustomScrollbar.min.css">
<!--js-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.mcustomscrollbar/3.0.6/jquery.mCustomScrollbar.concat.min.js
"></script>

使用方法

クラス名「.content」を使用している箇所が対象になります。

下記の「.content」を任意のクラス名に変更しても大丈夫です。

<script>
    (function($){
        $(window).on("load",function(){
            $(".content").mCustomScrollbar();
        });
    })(jQuery);
</script>

See the Pen jQuery custom content scroller by yoshiharu-rtr (@yoshiharu-rtr) on CodePen.

オプション

予め用意されているテーマを変更したり、豊富なオプションが用意されてます。

詳しくは下記サイト確認してみてください。

テーマの種類

オプションの種類

<script>
    (function($){
        $(window).on("load",function(){
            $(".content").mCustomScrollbar({
        theme:"dark",
      scrollButtons:{enable:true}
      });
        });
    })(jQuery);
</script>

See the Pen jQuery custom content scroller theme by yoshiharu-rtr (@yoshiharu-rtr) on CodePen.

スクロールバーの色を変更

新しいテーマ名を設定してcssファイルに変更する内容を記述します。

<script>
    (function($){
        $(window).on("load",function(){
            $(".content").mCustomScrollbar({
        theme:"my-theme"
      });
        });
    })(jQuery);
</script>

CSSファイル（style.cssなど使用しているファイルに記述）

.mCS-my-theme.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: red; }
.mCS-my-theme.mCSB_scrollTools .mCSB_draggerRail{ background-color: white; } 

See the Pen jQuery custom content scroller color by yoshiharu-rtr (@yoshiharu-rtr) on CodePen.

まとめ

スクロールバーのデザインをカスタマイズする方法を解説しました。

IEにも対応できますし、スクロールバーの色を変えることでサイトデザインも統一できます。