本記事の第１回目で
「flickSimple を使うと Android でスクロールができなくなる」
と書きました。これは、flickSimple 中でクライアントが Android の場合に
event.preventDefault() を実行しているためです。
これによりデフォルトのスクロール機能が無効になってしまいます。
じゃぁ、デフォルト以外の方法でスクロールを実現すればいいんじゃないの？
ということで、私は iScroll というライブラリを使ってみました。
iScroll の基本的な使い方は「iScrollでスマフォスクロール！」で紹介していますので、
ここではページ全体をスクロール可能にする部分のみご説明します。
----------
まずは、サンプルの見た目とコードをお見せします。
見た目
<meta charset="UTF-8">
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="./jquery.flicksimple.js"></script>
<script type="text/javascript" src="../../スクロール/iscroll-4/src/iscroll.js"></script>
<style>
/*-- 見た目のためのスタイル --*/
.p1 > div {
background-color:#ffffaa;
}
.p2 > div {
background-color:#ffaaff;
}
/* clearfix */
.flick-visible:after {
display: block;
clear: both;
height: 0px;
visibility: hidden;
content: ".";
}
/*-- flicksSimple用スタイル --*/
.flick-visible {
width: 200px;
margin: 10px;
border: red 1px solid;
}
.flick-visible > ul {
display: block;
margin: 0;
padding: 0;
width: 200%;
list-style-type: none;
}
.flick-visible > ul > li {
display: table-cell;
margin: 0;
padding: 0;
width: 200px;
line-height: 500%;
float: left;
}
/*-- iscroll用スタイル --*/
body {
margin: 0;
padding: 0;
}
/* 見えている部分を示す要素 */
#wrapper {
margin: 0;
padding: 0;
width: 100%;
}
/* スクロールさせる範囲 */
#scroller {
margin: 0;
padding: 0;
padding-bottom: 10px; /* 微調整 */
width: 100%;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="scroller">
<div id="flick1" class="flick-visible">
<ul>
<li class="p1"><div>１ページめ</div></li>
<li class="p2"><div>２ページめ</div></li>
</ul>
</div>
<div id="flick2" class="flick-visible">
<ul>
<li class="p1"><div>１ページめ</div></li>
<li class="p2"><div>２ページめ</div></li>
</ul>
</div>
<div id="flick3" class="flick-visible">
<ul>
<li class="p1"><div>１ページめ</div></li>
<li class="p2"><div>２ページめ</div></li>
</ul>
</div>
<div id="flick4" class="flick-visible">
<ul>
<li class="p1"><div>１ページめ</div></li>
<li class="p2"><div>２ページめ</div></li>
</ul>
</div>
<div id="flick5" class="flick-visible">
<ul>
<li class="p1"><div>１ページめ</div></li>
<li class="p2"><div>２ページめ</div></li>
</ul>
</div>
</div>
</div>
</body>
</html>
$(window).load(function(e) {
for (var i = 1; i <= 5; i++) {
$("#flick" + i).flickSimple();
}
new iScroll("wrapper");
});
iScroll でページ全体をスクロールさせる部分にフォーカスして説明します。
■ページ全体を囲むDIV要素
<body>
<div id="wrapper">
<div id="scroller">
<div id="flick1" class="flick-visible">
<!-- 省略 -->
</div>
</div>
</div>
</body>
BODY要素の直下にユーザーに見える範囲を示すDIV要素（#wrapper）、
その下にスクロール範囲を示すDIV要素（#scroller）をつくります。
ここで、#scroller の高さを iScroll を適用した結果を見ながら調整しました。
/* スクロールさせる範囲 */
#scroller {
margin: 0;
padding: 0;
padding-bottom: 10px; /* 微調整 */
width: 100%;
}
iScroll は #scroller の top プロパティの値を変更することで、
スクロールしているように見せています。
iScroll を適用すると、#scroller の右にスクロールバー全体を表わすDIV要素が挿入されます。
この挿入されたDIV要素の clientHeight と、iScroll により挿入されたスクロールバーの差を
#scroller の top プロパティに指定する値のMAX値としています。
このMAX値、私たちがスクロールしてほしい範囲よりも小さくなってしまうことがあります。
（float プロパティを使うと正確なサイズを取得できないのは、よくあることですね^^;）
なので、ちょっとした高さ調整が必要になります。
■ iScroll による回避策の問題点
flickSimple でフリックもできたし、iScroll でスクロールもできました。
でも、実はこの組み合わせで問題が発生しました。
一部のAndroid端末にて、右方向にフリック中に一瞬ページ全体が右にずれるんですね。
残念ながら原因の特定にはいたっておりません。。。
このときは flickSimple ではなく flipsnap という別のプラグインを改造して
フリックを実現させました。
flipsnap については別の機会にご説明したいと思います。
では、今回はここまで！