スマホサイトでoverflow:scrollのような表現を実装する

Mobile

先日、あるスマホ案件でoverflow:scrollを使おうとしたところ上手くいきませんでした。

【iPhone】
iOS5.1.1の場合･･･スクロールバーは表示されないがスライドさせる事が可能。
iOS4.2.1の場合･･･スクロールバーは表示されない。スライドさせたい場合は2本指で。

【Android】
スクロールバーが表示されない。1本指でも2本指でもスライドできない。

iPhone、Android共にこのような表示です。

対応策を色々調べたところ、jqueryプラグインを使って実装できる事がわかりました。
今回はスクロールを表示させたかったのでjScrollPaneを使います。

【使用したプラグイン】
・jScrollPane
http://jscrollpane.kelvinluck.com/
downloadはこらから
http://jscrollpane.kelvinluck.com/#download
zipファイルをダウンロードすると4種類のデータが格納されています。
今回使うのは「jquery.jscrollpane.min.js」と「jquery.jscrollpane.css」です。

【注意点】 jqueryのバージョンに注意してください。 jquery mobileや比較的最近のバージョンでは動きませんでした。今回はjquery-1.5.2.min.jsを使用しています。

【html】

<body>

<div id="contents">

<div id="jscroll">
    <ul class="atte-txt">
    <li>テキスト1</li>
    <li>テキスト1</li>
    <li>テキスト1</li>
    <li>テキスト1</li>
    <li>テキスト1</li>
    <li>テキスト1</li>
    <li>テキスト1</li>
    <li>テキスト1</li>
    </ul>
    <p>テキスト2</p>
    <p>テキスト2</p>
    <p>テキスト2</p>
    <p>テキスト2</p>
</div>

</div>

<!-- js -->
<script type="text/javascript" src="cssjs/jquery_mini.js"></script>
<!-- styles needed by jScrollPane -->
<link type="text/css" href="cssjs/jquery.jscrollpane.css" rel="stylesheet" media="all" />
<!-- the jScrollPane script -->
<script type="text/javascript" src="cssjs/jquery.jscrollpane.min.js"></script>

<script type="text/javascript">
$(function() {
       $('#jscroll').jScrollPane();
});
</script>
<!-- /js -->

</body>

[説明]
jsはbodyの閉じタグの前に記述します。
headに記述すると読み込みが上手くいかない事があります。

$(function() {
       $('#jscroll').jScrollPane();
});

この#jscrollを実装したいエリアのID・クラス名に変えてください。

【css】

#contents #jscroll {border: 1px solid #CCC; width: 304px;height: 100px; text-align:left; margin:35px auto 0 auto; color: #333333}
#contents #jscroll ul {list-style: none; padding: 0; margin:7px 7px 0 7px}
#contents #jscroll p {padding: 0; margin: 7px}
#contents .atte-txt{font-size: 14px; font-weight: normal; line-height: 1.5}

[説明]

サイズやボーダーなど、スクロール部分以外のcssは自分で用意します。
jScrollPaneを実装したエリアのwidthを%にすると正しく表示されないことがあります。

【jquery.jscrollpane.cssの変更点】
jquery.jscrollpane.cssの変更点は.jspTrackと.jspDragのbackgroundです。
.jspTrackはスクロールバーの背景色、.jspDragはスクロールの色を変更できます。

例）

.jspTrack {
    background: #f7f7f3;
    position: relative;
}

.jspDrag {
    background: #c8d6fb;
    position: relative;
    top: 0;
    left: 0;
    cursor: pointer;
}

これらの作業の結果、このようになります。