スマホサイトでiframeがフリック出来ない件

スマホサイトでどうしてもiframeを使わなきゃ行けないときがある。
しかし、やってみて初めて知ったのだが、iframeをそののまま使うと、その部分だけフリック出来なくなるのだ。
どうしたものかとググってみたら、やっぱりありました。
以下方法。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> <style type="text/css"> .ifrm-container { width:300px; height:250px; overflow:auto; -webkit-overflow-scrolling:touch; display: inline-block; margin: 10px; } .ifrm { width:100%; height:100%; border:none; display:block; } </style> </head> <body> <div class="ifrm-container"> <iframe class="ifrm" scrolling="auto" src="http://www.infoscoop.org"></iframe> </div> <div class="ifrm-container"> < iframe class="ifrm" scrolling="auto" src="http://jquery.com/"></iframe> </div> </body> </html> |
囲ってる外側のdivにも、きちんと指定してタッチできる領域ですよーって言ってやらんとだめなようだ。
jqueryを使ってなんとかする方法とかネットにでてたが、うまく行かなかった。(自分がちゃんとできてないだけだと思う)
参考までに。
Leave a comment