JavaScript

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

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

ソース元:jQuery custom content scroller

以下がソース元です。
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>見出しタイトル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>

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>

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

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

 

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