• かちびと.net

    スクロールバーのデザインを変更できる軽量でクロスブラウザ対応のjQueryプラグイン・Tiny Scrollbarのご紹介。なかなか汎用的で良かったです。1つだけ覚えておけば良さそうですねー。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

スクロールバーのデザインを変更できる軽量でクロスブラウザ対応のjQueryプラグイン・Tiny Scrollbar

スポンサーリンク

題名の通りスクロールバーを変える
jQueryプラグインです。全然使う
機会が無かったんですが、以前から
触ってみたいと思っていたところ、
ちょうど良さそうなプラグインを
見かけたので試してみました。

デザインそのものはcssでカラーリングしたり、画像に置換したり、と自由も利いて、クロスブラウザにも対応、3KB以下と軽量です。

Tiny Scrollbar


こんな感じでデザインを変えられます。せっかく統一性をうまく出したのに仕様上スクロールバーが出てしまって一体感を損なう悲しみと絶望感はWebデザイナーさんなら経験したことがあるのではないでしょうか?え、無いの・・じゃあいらないかn

Sample

まぁせっかくなので見てください。


当サイトの右上のギアアイコンを使いました。このアイコンをクリックすると回転するんですがこれはcss3のkeyframeとanimateでうごかs、あ、どうでもいいですよね。

IE6/7


IEでもなんでもこいや、って感じです。

iPhone


iPhoneでもなんでもこいや、って感じです。

コード

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script type="text/javascript" src="jquery.tinyscrollbar.min.js"></script>

本体とプラグインを読み込んで設定するだけ。

$(document).ready(function() {
     $('#scrollbar1').tinyscrollbar();
});

↑ デフォルト

$(document).ready(function() {
     $('#scrollbar2').tinyscrollbar({ axis: 'x'});
});

↑ 横スクロールならx軸であることを明示する

$(document).ready(function() {
     $('#scrollbar3').tinyscrollbar({ size: 100 });
});

↑ スクロールバー自体のサイズを決める

とは言え、完全にスクロールバーっぽく見えなくしてしまうのは大きくユーザビリティを損ないますのでご利用の際は自己満足にならないようお気をつけ頂いたほうがいいかも。デモは自己満足というか手抜きです。

そのほかちょいちょい機能あるみたい。ライセンスはMITとGPLのデュアルライセンスみたいです(非圧縮側にて確認)。以下よりどうぞ。

Tiny Scrollbar

URL :
TRB :

Ads

Posts

Contact

Services