jquery.mCustomScrollbar.jsを使ってカスタムスクロールバーを表示する方法をご紹介します。
Contents
カスタムスクロールバーを表示する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を使ってカスタムスクロールバーを表示するデモページ
ソース元:jQuery custom content scroller
以下がソース元です。
jQuery custom content scroller
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。
ディスプレイ広告