jscrollpaneを使用しスクロールバーをちょっとだけカッコよくする!

こんにちは!

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

それではまた。

コメント