JavaScript

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

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

スタイリング: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>見出しタイトル1</h2>
        <hr />
        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> 
        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> 
        
        <div id="content-2" class="content nested">
          <h2>見出しタイトル2</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>

jquery.mCustomScrollbar.jsを使ってカスタムスクロールバーを表示するデモページ

理解を深めるために、実際に動作するデモページを見ることをお勧めします。以下のリンクから、カスタムスクロールバーが実装されたサンプルページを確認できます。

jquery.mCustomScrollbar.jsを使ってカスタムスクロールバーを表示するデモページ

ソース元:jQuery custom content scroller

この記事で使用したプラグイン「jQuery custom content scroller」に関する詳細情報は、以下のリンクからアクセスできます。

jQuery custom content scroller

まとめ

この記事では、Webページにカスタムスクロールバーを追加する方法を紹介しました。見た目のカスタマイズだけでなく、ユーザーの操作性の向上にもつながるこの技術は、特にコンテンツが多いページや、特定のデザインテーマを持つサイトにおいて有効です。是非、ご自身のプロジェクトで活用してみてください。

 
※流用される場合は自己責任でお願いします。
 デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。