カスタムスクロールバー表示する方法【jquery.mCustomScrollbar.js】 DAD UNION

jquery.mCustomScrollbar.jsを使ってカスタムスクロールバーを表示する方法をご紹介します。

Contents

カスタムスクロールバーを表示するCSSの記述
カスタムスクロールバーを表示するHTMLの記述
jquery.mCustomScrollbar.jsを使ってカスタムスクロールバーを表示するJavaScriptの記述
jquery.mCustomScrollbar.jsを使ってカスタムスクロールバーを表示するデモページ
ソース元：jQuery custom content scroller

カスタムスクロールバーを表示するCSSの記述

※style.css、jquery.mCustomScrollbar.cssファイルを読み込みます。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の記述

※カスタムスクロールバーを表示するエリアid=”content-1″とid=”content-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>

jquery.mCustomScrollbar.jsを使ってカスタムスクロールバーを表示するJavaScriptの記述

※jquery-1.11.0.min.js、jquery.mCustomScrollbar.jsファイルを読み込みます。$(“カスタムスクロールバーエリア”).mCustomScrollbar({オプション})を記述します。オプションではスクロール表示方法、位置等を設定します。オプションはソース元サイトの「Configuration」をご参考下さい。

  <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>