こんにちは！
少し前までは、スクロールバーのカスタマイズは「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を使用しスクロールバーをちょっとだけカッコよくする！」でした！
それではまた。
コメント