androidでスクロール(フリック)できないバグ

unscrollable bug of android

最近スマートフォン対応作業が増えてきて、PCと同じ感覚で作ってると上手くいかない事がままあります。そんな中で一番「え?』と思ったのがandroidのスクロールバグです。

縦幅横幅を数値で指定したエリアに対して、overflow:scrollを入れればスクロールバーが付くのはウェブ制作者なら誰でもご存知かと思いますが、なんと、androidではこの部分にバグがあり、スクロールができないんです。

スマホサイトの場合、エリア内スクロールを実装する事自体があまり無いのかもしれませんが、サイトの利用規約とか文章が長いものを設置する場合はスクロールできるエリアを用意してページ内のスペースを節約したりすると思います。

で、これどうすりゃ良いんだよって思ってたら、解決してくれている人が居たので試してみました(http://lagoscript.org/jquery/flickable)特に難しい設定はなく、jqueryとjquery.flicable.jsを読み込んで、スクロールエリアをjsで指定するだけ。記述はこんな感じでしょうか。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.flickable.js"></script>
<script type="text/javascript">// <![CDATA[
$(function() {
$('.area').flickable();
});
// ]]></script>

設置サンプルはこちら

良ければサンプルファイルもどうぞ。