こんにちは!
少し前までは、スクロールバーのカスタマイズは「Internet Explorer」しかできませんでした。しかもちょっと色を変更するぐらいのカスタマイズのみです。
しかし今は、便利な「jquery」などが出てきて、簡単にスクロールバーのカスタマイズが可能です。
今までは、あの味気ないデフォルトのスクロールバーしか設置できませんでしたので、デザインに合わせた、スクロールバーを設置できるのは、デザイナーとしては嬉しい限りです。
今回はそのスクロールバーのカスタマイズ方法を記事にしたいと思います。
↓デフォルトのスクロールバーを、カッコよくしましょう。
設置手順!
jsの設置!
↓htmlのhead部分にスクロールバーのカスタマイズに必要なjsを記述してください。「.news_wrapper」の部分は各自のCSSのクラス名に合わせてください。
<script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.jscrollpane.min.js"></script> <script type="text/javascript" src="jquery.mousewheel.js"></script> <script type="text/javascript"> $(function(){ $('.news_wrapper').jScrollPane(); }); </script>
CSSの設置!
↓スクロール要素に必要なCSSを記述してください。「scroll.css」でスクロールバーの幅や色の指定をしています。
<link rel="stylesheet" href="default.css" type="text/css" media="all"> <!-- スタイルをリセットするCSS --> <link rel="stylesheet" href="scroll.css" type="text/css" media="all">
上記のjsとCSSを記述したhtml!
↓jsとCSSを記述したhtmlは以下のようになります。
<!DOCTYPE html> <html lang="ja"> <html> <head> <meta charset="UTF-8"> <title>Scrollサンプル</title> <link rel="stylesheet" href="default.css" type="text/css" media="all"> <!-- スタイルをリセットするCSS --> <link rel="stylesheet" href="scroll.css" type="text/css" media="all"> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.jscrollpane.min.js"></script> <script type="text/javascript" src="jquery.mousewheel.js"></script> <script type="text/javascript"> $(function(){ $('.news_wrapper').jScrollPane(); }); </script> </head> <body> <div class="page"> <div class="news_wrapper"> <dl class='news'> <dt>2014/05/14</dt> <dd><a href="http://aaa.com/">あああああ</a></dd> <dt>2014/05/14</dt> <dd><a href="http://aaa.com/">あああああ</a></dd> <dt>2014/05/14</dt> <dd><a href="http://aaa.com/">あああああ</a></dd> <dt>2014/05/14</dt> <dd><a href="http://aaa.com/">あああああ</a></dd> <dt>2014/05/14</dt> <dd><a href="http://aaa.com/">あああああ</a></dd> </dl> </div> </div> </body> </html>
以上で設定完了です。デモページを用意しましたので、ご確認ください。
デモページ!
↓上記の設定をしたデモページを作成しました。
↓デモページのサンプルファイルはこちらよりダウンロードできます。
対応ブラウザ!
下記のブラウザで動作チェック済です。
- Google Chrome(Windows)
- Firefox(Windows)
- Safari(Windows)
- Internet Explorer 10(Windows)
- Internet Explorer 9(Windows)
- Internet Explorer 8(Windows)
- Internet Explorer 7(Windows)
最後に!
人によってはどうでも良いと思うかもしれないですが、少しでもサイトが良くなり、他のサイトとの違いを生み出せるのであれば、導入する価値は十分にあると思います。
デフォルトのスクロールバーより、カッコいいスクロールバーバーの方が良いに決まってます。
以上「jscrollpaneを使用しスクロールバーをちょっとだけカッコよくする!」でした!
それではまた。
コメント