*

スクロールバーのカスタマイズ。jScrollPaneを使用してみました。

公開日: : css3, html5, jquery, jscrollpane, 未分類

今回は、スクロールバーのカスタマイズに取り組んでみました。

 

サイトにスクロールバーを設置するんだったら、通常のスクロールよりも

変わったスクロールバーにしたい!

そっちの方が、かっこいいし、他のサイトと差がつく。

そんな事を思ったので、スクロールバーについて調べてみました。

 

調べてみて色々ありましたが、今回は簡単に設置できるjScrollPaneというjQueryプラグインを使用してみます。

 

まずは、こちらをみてください。

デモ1

こちらは、通常のcssのみで書いているスクロールバーです。

これじゃあなんか普通過ぎますよね。

次にjScrollPaneというjQueryプラグインを使用したものを見てください。

デモ2

スクロールバーが変わってるのがわかりますでしょうか?

 

見た目は、animation(動くサイト)と違って、少し地味ですが、

サイトに個性がでて、大切な事だと考えています。

スクロールバーの色が変更できるのがいいですねよ。サイトのカラーに合わせることができるので、バランスが取れる。

そして、かなりカスタマイズができるみたいなので自分なりのかっこいいスクロールバーができると思います。

今回は、色の変更だけなので、決してかっこいいとは言えないですが・・・。

かっこいいスクロールバーにしたい方は、調べてみるといいと思います。

 

以下に設置方法を記載いたします。

今回はこの3つのscriptファイルを使用します。

htmlファイルのbodyの中にscriptを埋め込んでください。

<body>

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js”></script>
<script type=”text/javascript” src=”js/jquery.jscrollpane.min.js”></script>
<script type=”text/javascript” src=”js/jquery.mousewheel.js”></script>

</body>

cssファイル以下の2つを使用します。

htmlファイルのheadの中にcssを指定ください。

<head>

<link rel=”stylesheet” type=”text/css” href=”css/index.css” />

<link rel=”stylesheet” type=”text/css” href=”css/jquery.jscrollpane.css” />

</head>

その後、以下のようなソースです。

————————————————————————————————————-

html(index.htmlのファイル)

<div class=”scroll_wrap”>
<div class=”scroll_area”>
<div id=”scr”>
ここにテキストを書きます。<br />ここにテキストを書きます。<br />ここにテキストを書きます。<br />ここにテキストを書きます。<br />
ここにテキストを書きます。<br />ここにテキストを書きます。<br />ここにテキストを書きます。<br />ここにテキストを書きます。
</div><!– /scr –>
</div><!– /scroll_area –>
</div><!– /scroll_wrap –>
————————————————————————————————————-

css(index.cssのファイル)
.scroll_wrap{
width:300px;
margin: auto;
margin-top: 22px;
overflow:hidden;
background: #000000;
border-radius:7px;
box-shadow:0 0 50px #111;
}

.scroll_area { height:270px; overflow:auto; line-height:3em;}

#scr{
width:100%;
margin-left: auto;
margin-right: 0;
}

.scr{
overflow-y:auto   /* スクロール表示 */
width: 100%;
height: 100%;
background-color: #000000;
}

————————————————————————————————————-

css(jquery.jscrollpane.cssのファイル)

/* 全体 */
.jspContainer { overflow:hidden; position:relative; }

/* スクロールバーを除いたエリア */
.jspPane { position:absolute; }

/* 縦スクロールバー ここでスクロールの幅など設定します。*/
.jspVerticalBar { position:absolute; top:0; right:0; width:25px; height:100%; }

/* 横スクロールバー ここでスクロールの幅など設定します。*/
.jspHorizontalBar { position:absolute; bottom:0; left:0; width:100%; height:10px; }

/* 背景 ここでスクロールの背景色を決めます。*/
.jspTrack { background-color:rgba(255,255,255,0.2); position:relative;}

/* ノブ ここでスクロールの色を決めます。*/
.jspDrag { background: #e84237; position:relative; top:0; left:0; cursor:pointer; }
.jspHorizontalBar .jspTrack, .jspHorizontalBar .jspDrag { float:left; height:100%; }
————————————————————————————————————-

index.cssで表示したい領域を設定します。

jquery.jscrollpane.cssでスクロールバーのカスタマイズの設定をします。

このjquery.jscrollpane.cssファイルで、色やスクロールバーの太さなどが変更できます。

このjquery.jscrollpane.cssファイルをカスタマイズすることでイメージもだいぶ変わってくると思います。

最後に<body>の中にscriptを記述します。

————————————————————————————————————-

script(htmlファイルのbodyの中に記述してください。)

<script type=”text/javascript”>
$(function(){
$(‘.scroll_area’).jScrollPane();
});
</script>
————————————————————————————————————-

以上で、スクロールバーのカスタマイズができます。

わかりにくいところがありましたら、こちらも参考にしてみてください。

軽い!ChromeやFirefoxのスクロールバーも装飾できるjQueryプラグインjScrollPaneの設置方法

スクロールバーをオシャレにカスタマイズする「jScrollPane」の使い方

自分もこのサイトを参考にしました。

 

今回の1つのファイルをUPしときましたので、

よかったら使ってください。

jscrollpane

————————————————————————————————————-

補足=今回のスクロールバーは、色を変更しただけですが、スクロールの速度(スクロールの量)なども

変更できるみたいです。

調べてみてやってみようと思ったのですが、なんか少し複雑そうだったので、やめました。

まだまだ勉強不足ですいません・・・。時間の都合もありましたので、今後ゆっくり時間をかけてやってみようと思います。


関連記事

no image

animationでboxを動かしてみた。

今回は、animationを使って、boxを動かしてみました。 マウスを乗せたときに指定したb

記事を読む

no image

jquryで問い合わせフォームのデザインを作ってみた。

今回は、jquryで問い合わせフォームを作ってみました。   問い合わせフォー

記事を読む

-jQuery-メールアドレス入力確認付メールフォーム

今回は、jQueryを使ってメールフォーム(メールアドレス入力確認付)を作成してみました。

記事を読む

no image

テキストの縦位置を設定する。line-height:を使用する。

今回は、テキストの間隔について書きたいと思います。 テキストを書くときテキストの縦位置が気にな

記事を読む

no image

背景に画像をフルスクリーンさせる方法。 maximageを使用。

今回は、背景画像をフルスクリーンにし、なおかつ、スライダーする方法について、調べてみました。

記事を読む

no image

背景画像だけ透明にしたい。background-color:rgbaを使う。

今回は、背景画像だけを透明にしてみました。 背景の上に透明な色を乗せたいや、テキストを書く要素

記事を読む

“html”このタグの中になんのタグを入れれるんだっけ?

今回は、このタグの中になんのタグを入れれるんだっけ? という記事を見つけたので、ご紹介したいと思い

記事を読む

no image

マウスオーバーした時に画像を半透明にする。”opacity”を使用する。

今回は、マウスオーバーをした際に半透明にするという事を調べてみました。 マウスオーバーをし

記事を読む

no image

メニューをプルダウンする方法。globalNaviを使用。

今回は、メニューをプルダウンさせる方法について調べてみました。 メニューをたくさんあると、

記事を読む

no image

簡単popupの設置方法。Pop Easyを設置してみました。

今回は、ポップアップ(popup)の設置に取り組んでみました。   ポップアッ

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PAGE TOP ↑