コピペで作る！jQueryスクロールバーデザイン【備忘録】

スクロールバーはCSSでもデザインカスタマイズできますが、実は決まったブラウザのみしか反映されないのですよね。Firefoxなどではデフォルトのスクロールバーにしか見えません。

しかし「jQuery」を使えば、どのブラウザから見ても同じくカスタマイズされたスクロールバーが表示されます。面倒な方はこのままの手順＆コピペしてくださいね。恐らく簡単に反映されるはずです。

今はよく解からないままコピペでページを作っているだけでも、後から自然と理論が解ってきます。そうなれば他のデザインカスタマイズも自由自在です。

－　CONTENTS　－

1 【1】ダウンロード→サーバーへアップ
2 【2】デザインスクロールバーを置きたいページの記述
- 2.1 ＜head＞〜＜／head＞内
- 2.2 ＜body＞〜＜/body＞内
3 【3】完成するとこんな感じです
4 免責

【1】ダウンロード→サーバーへアップ

まずは「jQuery」と「mCustomScrollbar」をダウンロードしてデスクトップにでも置きます。
どちらも無料でダウンロード可能です。
【各ダウンロードページ】

次に（サーバーディレクトリ下に）下記フォルダ（/js/mcs/）を作って、先ほどダウンロードした2つのファイル（フォルダ）をFTPでアップしましょう。

/js/→の中に、jQueryをアップロード
/js/mcs/→の中に、mCustomScrollbarをアップロード

【2】デザインスクロールバーを置きたいページの記述

.htmlのファイルに下記をコピペ（貼り付け）してみてください。

＜head＞〜＜／head＞内

<head>
<!--// スクロールバー //-->
<link href="/js/plugin/m-custom-scrollbar/jquery.mCustomScrollbar.css" 
rel="stylesheet" type="text/css" />
<script type="text/javascript" 
src="/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" 
src="/js/mcs/jquery.mCustomScrollbar.concat.min.js"></script>

<script type="text/javascript">
     $(function(){
         $("#content_1").mCustomScrollbar(csObj);
         $("#content_2").mCustomScrollbar(csObj);　
         $("#content_3").mCustomScrollbar(csObj);
     });
</script>

<style>
         .content{
             width:400px;　<!--//←横幅 //-->
             height:100px;　<!--//←高さ //-->
             overflow:hidden;
             padding:5px;　<!--//← 余白//-->
             background:#ffffcc;　<!--//←背景色 //-->
             color:#eee;　<!--//←スクロールバー色 //-->
         }
</style>
</head>

<head>

rel="stylesheet" type="text/css" />

src="/js/jquery-1.9.1.min.js"></script>

src="/js/mcs/jquery.mCustomScrollbar.concat.min.js"></script>

$(function(){

$("#content_1").mCustomScrollbar(csObj);

$("#content_2").mCustomScrollbar(csObj);　

$("#content_3").mCustomScrollbar(csObj);

});

</script>

<style>

.content{

width:400px;

height:100px;

overflow:hidden;

padding:5px;

background:#ffffcc;

color:#eee;

}

</style>

</head>

content_1〜4は、複数箇所にスクロールバーを設置したい場合です。
2以下は必要でなければ削除、5つ以上必要なら下段にコピペして数字を書き換えて増やしてください。

＜body＞〜＜/body＞内

<body>
<div id="content_1" class="content"></div>
<div id="content_2" class="content"></div>
<div id="content_3" class="content"></div>
</body>

<body>

</body>

上記divタグをスクロールバー表示したい場所に書きます。
＜div＞〜＜/div＞の間にスクロールさせたい文字・HTML文書を書きます。

【3】完成するとこんな感じです

当サイトのトップページに上記jQueryを使って設置したスクロールバーが
あります。サンプル代わりに→「かきもの企画」トップページ。

免責

免　責

当「こぼれ記事書房」内のHP＆WPについて・その他記事は、ほとんど個人的な備忘録ついでに掲載しております。
ご使用は自己責任でお願い致します。設置・改変による不具合の保証はいたしかねます。
ご質問・ご相談などはお気軽にどうぞ（必ずお応えできるとは限りませんが……）。
上級者様のご教示もコメント欄もしくは連絡フォーム※現在作成準備中からお受けいたします。
ただしコメント・ご連絡はすべて公開・返答させていただくという確約はできませんので予めご了承くださいませ。

こぼれ記事書房【かきもの企画】

Presented by Kakimono Kikaku