jQueryでカスタムスクロールバーを実装する完全ガイド【jquery.mCustomScrollbar.js】｜DAD UNION

Webデザインの世界にはたくさんの工夫がありますが、その中でもユーザーの操作感を向上させる方法の一つが、カスタムスクロールバーの実装です。
今回は、jQueryプラグインの「jquery.mCustomScrollbar.js」を使って、オリジナルのスクロールバーを作成する方法を、初心者でもわかりやすく解説します。

Contents

スタイリング：CSSの設定
構造：HTMLの記述
機能：JavaScriptでの実装
jquery.mCustomScrollbar.jsを使ってカスタムスクロールバーを表示するデモページ
ソース元：jQuery custom content scroller
まとめ

スタイリング：CSSの設定

まず、カスタムスクロールバーに必要なCSSを設定しましょう。これには「style.css」と「jquery.mCustomScrollbar.css」の2つのファイルを読み込みます。
style.cssでは、ページ全体やスクロールバーエリアの見た目を調整できます。デザインに合わせて自由に変更してみてください。

      <link rel="stylesheet" href="style.css">
      <link rel="stylesheet" href="jquery.mCustomScrollbar.css">
      <style>
        h1{
          text-align: center;
          font-size: 18px;
          padding: 20px 0;
        }
      </style>

構造：HTMLの記述

次に、カスタムスクロールバーを適用したい部分のHTMLを記述します。例として、idをcontent-1とcontent-2に設定した2つのエリアを準備しました。このスクロールバーは、水平方向（横）だけでなく垂直方向（縦）にも対応しています。この部分も、必要に応じて自由にカスタマイズしてみてください。

      <h1>カスタムスクロールバーを表示します</h1>

      <div id="content-1" class="content nested">
        <h2>見出しタイトル１</h2>
        <hr />
        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> 
        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> 
        
        <div id="content-2" class="content nested">
          <h2>見出しタイトル２</h2>
          <hr />
          <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> 
          <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> 
          <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> 
          <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> 
          <hr />
        </div>
        
        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> 
        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> 
        <hr />
      </div>

機能：JavaScriptでの実装

ここが最も重要な部分です。jQuery（jquery-1.11.0.min.js）と「jquery.mCustomScrollbar.js」プラグインを読み込んだ後、特定のエリアに対して.mCustomScrollbarメソッドを適用します。
$(“カスタムスクロールバーエリア”).mCustomScrollbar({オプション})を記述します。このメソッドでは、スクロールバーの表示方法や位置など、様々なオプションを設定できます。具体的なオプションの詳細は、プラグインの公式ドキュメントを参照してください。

  <script src="jquery-1.11.0.min.js"></script>
  <script src="jquery.mCustomScrollbar.js"></script>
  <script>
    (function($){
      $(window).on("load",function(){
        
        $("#content-1,#content-2").mCustomScrollbar({
          axis:"yx",
          theme:"3d",
          scrollInertia:550,
          scrollbarPosition:"outside"
        });
        
      });
    })(jQuery);
  </script>