スクロールバーカスタマイズ

パソコンのデフォルトのスクロールバーってダサいですよね。変な青いやつ。
コンテンツ内にoverflow-y:scroll;などとしてスクロールバーを表示させた時
あの青いのが出てくるとデザインが台無しです~。

jQでいいのがないか探してみたら
http://kachibito.net/web-design/tiny-scrollbar.html
が良さそうなんですが、使い方がいまいちわかりません。
本サイトのダウンロードボタン押しても????だし。
http://baijs.nl/tinyscrollbar/

今度の新年会の授業でお願いしまーす。

> 本サイトのダウンロードボタン押しても????だし。
> http://baijs.nl/tinyscrollbar/
ダウンロードボタン押した後のアドレスを確認しましょう。
末尾が.jsになっているはずです。つまり、ブラウザでjsファイルを表示している状態です。
こういうケースは良くありますが、慌てずに、そのページを「別名でページを保存」すれば、ローカルにjsファイルを保存できます。 

まず、
・jQuery本体の読み込み
・jQueryプラグイン(jquery.tinyscrollbar.min.js)の読み込み
・プラグインへの指示をするscriptをjQuery形式で書くという手順は、その他のプラグインと同じ手順ですね。

次に、このjsプラグインの実装で注意すべき所ですが、
・html要素でスクロールバーになる部品を、特定のクラス名で用意しておく。
・スクロールバーのデザインはcssで行う。

この2点が肝心です。はじめは本家サイトや紹介サイトのhtmlとcssをコピペしてくるのが良いでしょう。
例えば、こうなります。
http://ksk-soft.com/jq-labo/jqueryTinyscrollbar.html

最低限の事しか書いていないので、ソースを見てもらってもわかると思います。
firebugでスクロ−ルバーのcssを確認して、色を変えてみたりしてください。

タカハシ先生#2タカハシ先生

2013 おめでとうございます!今年もよろしくお願い致します。 

とりあえずコピペしてみましたが3時間格闘しても新年早々うまくいきません。
入れ子が多いので何か違っているのか、イージーミスの可能性もあるのか。

ふぇ~。正月でも頑張らねば。

historyの部分
http://thebbboogie.com/band.html

真中のぶ#3真中のぶ

div id=”viewport”じゃなくてclass=”viewport”
div id=”out_p”じゃなくてclass=”overview”でないと駄目。 

それと

から、

までのcssも必須。

タカハシ先生#2タカハシ先生

出来ました!
でも….
結局コピペして出来ただけなので理解度は低いです。
色を変えるくらいは出来ますが。 

理解した事は、これはデフォルトの青いスクロールバーをカスタマイズ
するものではないんですね。デフォルトの青いのは、

で消しておいて、新たにdivで要素を作り新しいカッコいいのをそこに表示させるという事なんですね。

ちなみに

とすると青いのでてきます。

あと、.trackとか.viewportとかそのあたり名前やクラスかIDかは、
「jquery.tinyscrollbar.min.js」
の中で指定されているものなので変更禁止なんですね。

真中のぶ#3真中のぶ
その理解でOKです。
タカハシ先生#2タカハシ先生
先生、ありがとうございます。

今回の件で思った事。

ダウンロードボタン押した後のアドレスを確認しましょう。
の先生の解説や、
「.trackとか.viewportとかそのあたり名前やクラスかIDかは、
「jquery.tinyscrollbar.min.js」
の中で指定されているものなので変更禁止」
の事や、
「これはデフォルトの青いスクロールバーをカスタマイズするものではない」
という事などなど、
解説してるサイトでは記載されていませんので、分りにくいと思いました。
(上級者には当たり前の事なのかもしれませんが….)

「clubringo」は”初心者でもわかる!”をテーマにして行きたいと思います。

真中のぶ#3真中のぶ

カテゴリー: 質問と回答 | タグ: , , | 投稿日: | 投稿者:
真中のぶ

真中のぶ について

The B.B.BoogieというバンドでVocalをしています。サーフィンもします。シングルフィンのクラッシックなロングボードに乗っています。ウェブデザイナーでもあります。タカハシ先生の一番弟子ですが時々すっとこどっこいな質問をして校庭10周と言われます。「パソコン倶楽部りんご」は僕が命名しました。ジョブズさんに敬意を表して。好きなcssはmargin{0 auto;}

スクロールバーカスタマイズ」への1件のフィードバック

  1. ピンバック: サイボウズの掲示板「問答編」をclubringoに移転 | clubringo

コメントを残す

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

CAPTCHA