*

スクロールバーのカスタマイズ。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

htmlの書き方について。

ホームページを作成するのには、flashを除けばほとんどhtmlで書きます。 ホームページがた

記事を読む

-jQuery-送信ボタン1度しか押せないようにする方法

今回は、ボタンを一度クリックしたら、押せないようにする方法をしてみました。 問い合わせ

記事を読む

no image

画像を順番に表示する方法。画像のプリローダー。imgBoxを使用。

今回は、ページ表示後に画像を順番に表示するという事を調べてみました。 ページ表示後に画像が

記事を読む

no image

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

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

記事を読む

no image

カスタマイズができるスライドショーを設置する方法。diapoを使用。

今回は、スライドショーを設置してみました。 ホームページにスライドショーを設置するのは、当たり

記事を読む

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

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

記事を読む

no image

jqueryを使って画像を拡大・縮小させる。

今回は、画像を拡大・縮小させるという事をやってみました。 前回は、画像を回転させるという事をや

記事を読む

no image

ドラッグの色を変更する。::selectionを使用する。

今回は、ドラッグした時に色の変更方法を書いてみました。 通常では、ドラッグをしたときは、白にな

記事を読む

no image

HP作成に必要なもの。

今週は、ブログの更新が遅くなりました。 今作業している内容では、ネタがないという理由で更新がな

記事を読む

no image

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

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

記事を読む

Message

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

PAGE TOP ↑