*

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

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

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

記事を読む

no image

ボタンを押すとコンテンツが現れる方法。スライドパネル。

今回は、ボタンを押すとコンテンツが現れる方法を調べてみました。 ボタン押すと下にコンテンツが現

記事を読む

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

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

記事を読む

no image

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

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

記事を読む

no image

jqueryを使って画像を回転させる。jQueryRotateを使用

今回は、画像を回転させるという事をやってみました。 調べてみたところ、jqueryを使って簡単

記事を読む

no image

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

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

記事を読む

no image

animationでboxを動かしてみた。

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

記事を読む

no image

背景画像をjqueryを使用して、フルスクリーンで動かす方法。backgroundPositionを使用。

今回は、背景画像をjqueryを使って、動かすという事をしてみました。 背景画像はアメニーショ

記事を読む

no image

海外サイトのかっこいいサイト集。

サイトを作成するにあたってもっとも大切なものは、想像力だとおもいます。 デザイナーの方などは特

記事を読む

no image

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

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

記事を読む

Message

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

PAGE TOP ↑