スクロールバーをかっこよくデザインする

2014/11/21 2014/12/11

新着情報などトップページに固定サイズの枠内で表示させるとき、デフォルトの状態だとかなりかっこ悪いので見栄え良くする方法をメモ

これを

こんな感じにする。

「jscrollpane」を使う

jqueryのプラグインjscrollpaneをつかいます。

http://jscrollpane.kelvinluck.com/

から必要ファイルをダウンロード

必要なファイル

・jquery.jscrollpane.min.js
・jquery.mousewheel.min.js
・jquery.jscrollpane.css

ソースコード

ハイライト部が組み込みに必要なところです。

<html lang="ja">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="format-detection" content="telephone=no">
<title>Sample</title>

<link type="text/css" href="jquery.jscrollpane.css" rel="stylesheet" media="all">
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.mousewheel.js"></script>
<script type="text/javascript" src="jquery.jscrollpane.min.js"></script>
<script type="text/javascript">
    $(function() {
        $('.scroll_area').jScrollPane();
    });
</script>
<style type="text/css">
<!--
 .scroll_area {
     width: 200px;
     height: 100px;
     overflow: auto;
     background-color: #eed;
 }
-->
</style>
</head>

<body>
    <div class="scroll_area">
        <p id="1">1．あああああ</p>
        <p id="2">2．あああああ</p>
        <p id="3">3．あああああ</p>
        <p id="4">4．あああああ</p>
        <p id="5">5．あああああ</p>
        <p id="6">6．あああああ</p>
        <p id="7">7．あああああ</p>
        <p id="8">8．あああああ</p>
        <p id="9">9．あああああ</p>
        <p id="10">10．あああああ</p>
        <p id="11">11．あああああ</p>
        <p id="12">１2．あああああ</p>
        <p id="13">１3．あああああ</p>
        <p id="14">１4．あああああ</p>
        <p id="15">１5．あああああ</p>
    </div>
</body>
</html>

ポイント：.scroll_areaボックスは高さを指定して、overflow:hidden;を指定する（またはauto）

バーの色や大きさはjquery.jscrollpane.css で指定できます。見たらなんとなくわかると思います。

プログラムでスクロールさせる

上記で一応完成なのですが、id=”10″ の場所にスクロールせさるといったように自由にjqueryでスクロールさせたい場合

var pane = $('.scroll_area');
pane.jScrollPane(
{
animateScroll: true
}
);
var api = pane.data('jsp');

//スクロールバー移動 id="#10"へ
api.scrollToElement('#10', true);

こんな感じです。

animateScrollを指定することでアニメーションスクロールします。ほかにもいろいろオプション指定できるみたいです。