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

公開日：2014年5月14日
最終更新日: 2015年3月12日

jquery_scroll_photo_01

こんにちは！

少し前までは、スクロールバーのカスタマイズは「Internet Explorer」しかできませんでした。しかもちょっと色を変更するぐらいのカスタマイズのみです。

しかし今は、便利な「jquery」などが出てきて、簡単にスクロールバーのカスタマイズが可能です。

今までは、あの味気ないデフォルトのスクロールバーしか設置できませんでしたので、デザインに合わせた、スクロールバーを設置できるのは、デザイナーとしては嬉しい限りです。

今回はそのスクロールバーのカスタマイズ方法を記事にしたいと思います。

デフォルトのスクロールバーを、カッコよくしましょう。

jquery_scroll_photo_02

目次！

1.設置手順！
2.デモページ！
3.対応ブラウザ！

設置手順！

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)