パソコンのデフォルトのスクロールバーってダサいですよね。変な青いやつ。
コンテンツ内に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を確認して、色を変えてみたりしてください。
とりあえずコピペしてみましたが3時間格闘しても新年早々うまくいきません。
入れ子が多いので何か違っているのか、イージーミスの可能性もあるのか。
ふぇ~。正月でも頑張らねば。
historyの部分
http://thebbboogie.com/band.html
div id=”out_p”じゃなくてclass=”overview”でないと駄目。
それと
1 |
#scrollbar1 { width: 520px; clear: both; margin: 20px 0 10px; } |
から、
1 |
.noSelect { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; } |
までのcssも必須。
でも….
結局コピペして出来ただけなので理解度は低いです。
色を変えるくらいは出来ますが。
理解した事は、これはデフォルトの青いスクロールバーをカスタマイズ
するものではないんですね。デフォルトの青いのは、
1 |
#scrollbar1 .viewport{overflow:hidden;} |
で消しておいて、新たにdivで要素を作り新しいカッコいいのをそこに表示させるという事なんですね。
ちなみに
1 |
#scrollbar1 .viewport{overflow:scroll;} |
とすると青いのでてきます。
あと、.trackとか.viewportとかそのあたり名前やクラスかIDかは、
「jquery.tinyscrollbar.min.js」
の中で指定されているものなので変更禁止なんですね。
今回の件で思った事。
ダウンロードボタン押した後のアドレスを確認しましょう。
の先生の解説や、
「.trackとか.viewportとかそのあたり名前やクラスかIDかは、
「jquery.tinyscrollbar.min.js」
の中で指定されているものなので変更禁止」
の事や、
「これはデフォルトの青いスクロールバーをカスタマイズするものではない」
という事などなど、
解説してるサイトでは記載されていませんので、分りにくいと思いました。
(上級者には当たり前の事なのかもしれませんが….)
「clubringo」は”初心者でもわかる!”をテーマにして行きたいと思います。
ピンバック: サイボウズの掲示板「問答編」をclubringoに移転 | clubringo