【jQueryプラグイン】スクロールバーの太さ、色などをカスタマイズできるプラグイン ※mCustomScrollbar
2016年8月12日コーディング作業をする中で、デザインを確認していると「スクロールバーがなんか細いー!変な色~、面倒くさそう、、、」と思ったことがあったのですが、プラグインで簡単に解決できました!笑
作ってくれた方ありがたや!
今回、mCustomScrollbarというプラグインを使用したので、下記に簡単な使い方を記載しておきます。
【ダウンロード】
https://github.com/malihu/malihu-custom-scrollbar-plugin

上記サイトのdownloadからファイルをおとしてきます。
【html】
ソースhead部分に下記のように記載します。(フォルダ階層は任意)
1 2 3 4 5 6 7 8 9 10 |
<link rel="stylesheet" type="text/css" href="css/jquery.mCustomScrollbar.css"> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.mCustomScrollbar.min.js"></script> <script type="text/javascript"> $(function(){ $(window).load(function(){ $(".scrollBox01").mCustomScrollbar(); }); }); </script> |
cssとjsファイルの読み込みをして、functionの記述をします。
スクロールバーのデザインを変えたい要素に.scrollBox01というクラスを付けてあげます。
※ここでは、overflow:auto;や高さ指定などのcss記述説明は割愛します。
あとは、必要に応じてjquery.mCustomScrollbar.css内でスクロールバーの色などを調整するだけ!すごく便利ですね!
【参考サイト】
http://eturlt.net/blog/20130612/customscrollbar/
http://manos.malihu.gr/jquery-custom-content-scroller/