マジリブログ
つらつら書いてます。
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>
良ければサンプルファイルもどうぞ。