iScrollの使い方 #JavaScript

概要

スマホWebサイトを作成する際に、ヘッダ、フッタを固定して、コンテンツ部分はスクロールさせたいと思いました。
　ヘッダの固定は特に問題なく出来るのですが、フッタの固定はWindowサイズが端末によって変わるので、どうしたものかと思っていました。

iScroll

　JSで何かよいパッケージがあるかと探したところ、iScrollというものがありましたので、それを導入した過程を書きます

URL

install（bower利用時）

$ bower install --save iscroll

※bowerを使っていない場合は、上記サイトからDLして下さい

how to

まずは、include

<script src="bower_components/iscroll/build/iscroll.js"></script>

※PATHはbowerを利用時のものです。適当に読み替えて下さい

body部を、3つのセクション（ヘッダ、コンテンツ、フッタ）に分けます

<div id="header"></div>
<div id="wrapper"></div>
<div id="footer"></div>

iScrollの設定をします。

    myScroll = new IScroll('#wrapper', {
        mouseWheel: true,
        scrollbars: false
    });

ここで、重要なのが第一引数としているセレクタの意味しているところです。iScrollは、ここで指定したセレクタ直下にあるblock要素をscrollさせるます。
故に、

<div id="wrapper">
  <ul>
    <li>...</li>
    ...
  </ul>
</div>

とすると、ul部分がスクロール対象と処理されるようになります。
詳しくは、iScrollのインスタンスを見てもらうと理解できると思います。

console.log(myScroll);

スクロール箇所を明確にするため、scrollerセクションを作ります

<div id="wrapper">
  <div id="scroller">
    <div id="content_1">...</div>
    <div id="content_2">...</div>
    <div id="content_3">...</div>
  </div>
</div>

上記までで、やりたいことは実現できるかと思います。

補足

使い方がまずいのか、下までscrollすると、最後のコンテンツが切れてしまう現象がありまして、対策として、最後のコンテンツはpadding-bottom:20pxしました。