月別アーカイブ: 2010年11月

iPadやiPhoneなどwebkitブラウザでoverflow:scrollが不便な件


iPadなどでoverflow:scrollを使った場合、スクロールするには2本指でなぞらなければならない。

2本指の仕様を知らない(ほとんどの?)人のためにコンテンツ上に説明を書くか、
回避方法を考えなければならないと思い調べてみたところ、
すでにスクロール問題を解決できるJSがあるようです。

▼jQuery.flickable
http://lagoscript.org/jquery/flickable
▼iScroll
http://cubiq.org/iscroll

ただ、自分のやりたい事にはうまく当てはまらなかったので、
iPadのときでスクロールが出たときだけ注釈を表示するJSを自作しました。

▼css

<style type="text/css">
div#contents{
width:300px;
height:200px;
overflow:auto;
border:1px solid #ccc;
}
div#contents p{
height:500px;
}
</style>

▼html

<div id="contents">
<p>コンテンツA</p>
<p id="found"></p>
<p>コンテンツB</p>
</div>

▼JavaScript

<script type="text/javascript">
if(navigator.userAgent.match(/iPad/i) && document.getElementById("contents").scrollHeight > document.getElementById("contents").offsetHeight){
var found = document.getElementById('found');
var mobile_caution = document.createElement("span");
mobile_caution.innerHTML = '※このエリアは2本指でなぞると縦スクロールできます。';
mobile_caution.setAttribute("class", "mobile_caution");
found.appendChild(mobile_caution);
}
</script>

▼デモ(iPad用)
http://www.kuzumi.net/sample/overflow_ipad.html
※2011/1/19 リンクが認証エリアだったため修正

▼iPad(iPhone)の困った仕様
http://hcondo2000.blogspot.com/2010/06/ipadiphone.html
▼iPhone(iPod Touch)のブラウザでoverflow: scroll;
http://akihiro.jugem.jp/?eid=202
▼overflow:auto できないモバイルSafari
http://www.inazumatv.com/contents/archives/4786