【jQuery】スクロールバーをオシャレにカスタマイズする「jScrollPane」の使い方 ｜ KLUTCHE
どんなにサイトをクールなデザインに仕上げても、どうしても邪魔するスクロールバー。 jQeryをプラグイン使ってCSSで自由にカスタマイズします。 デモ デモページ 必要なファイル一式 jScrollPaneというjQueryプラグインを使用します。 最低限必要なのは ・jQuery本体 ・jquery.jscrollpane.min.js ・jquery.jscrollpane.css の3つです。 HTML まず上の3つのファイルをhead内で読み込みます。 <link rel="stylesheet" href="jquery.jscrollpane.css"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <s
jQueryでスクロールバーのデザインを変更する | WEBZARU
新着情報一覧などのように全て見せる必要がない(スクロールして閲覧可能)場合に、そのコンテンツだけスクロールさせて見せることがよくあります。 CSSで高さを固定してやることによりそれ以上の高さが必要な場合には、自動的にスクロールバーが表示されるのですが、何よりも見た目がダサいです。そんな時、jScrollPaneを使うとスクロールバーのデザインを変更することができます。 jQueryのプラグインであるjScrollPaneの使い方をご紹介。 jScrollPaneとは スクロールバーのデザインを変更するためのjQueryのプラグインです。本体のJavaScriptとCSSの他にjquery.mousewheel.jsも併用し動作します。 現時点で最新版の「v2.0.0beta11」を例としています。ダウンロードは、本家サイトから行ってください。 jScrollPaneの使い方 <!DOCTY
スクロールバーのデザインを変更できる軽量でクロスブラウザ対応のjQueryプラグイン・Tiny Scrollbar - かちびと.net
題名の通りスクロールバーを変える jQueryプラグインです。全然使う 機会が無かったんですが、以前から 触ってみたいと思っていたところ、 ちょうど良さそうなプラグインを 見かけたので試してみました。 デザインそのものはcssでカラーリングしたり、画像に置換したり、と自由も利いて、クロスブラウザにも対応、3KB以下と軽量です。 こんな感じでデザインを変えられます。せっかく統一性をうまく出したのに仕様上スクロールバーが出てしまって一体感を損なう悲しみと絶望感はWebデザイナーさんなら経験したことがあるのではないでしょうか？え、無いの・・じゃあいらないかｎ Sample まぁせっかくなので見てください。 当サイトの右上のギアアイコンを使いました。このアイコンをクリックすると回転するんですがこれはcss3のkeyframeとanimateでうごかｓ、あ、どうでもいいですよね。 IE6/7 IEで
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
