iframeがiOS(iPhone)だとスクロールできない時の対処法を解説
ペルソナ子
iframeのスクロールできない
ペルソナ子
ペルソナ子
なんか縦長くて格好悪いよ！
その問題は私もくらいました。
悩みますよね。
「壊れてるぞ」って言って、私も１時間程悩みました。
でも結論から言うと、
CSSで解決できます。
私の様に無駄な時間を消費してほしくないので、まとめました。
5分程度で読み終える内容なので是非読み進めてください。
内容を確認しに下へ進む！
スポンサードサーチ
iOS(iPhone)だとiframeのスクロールができない問題とは
一旦、内容確認です。
これ読んでる方はiOS(iPhone)での問題で間違いかと思います。androidでは発生しないはずです。
というのも私は最初、「iframe スマホ スクロールできない」で検索していたのですが、
結局iOS(iPhone)だけの問題ですね。
まずPCではちゃんとスクロールできます。下の画像をご確認ください。
よく見る、新着情報ですね。
このように、PC版では普通にスクロールバーが出ますね。
でもiOS(iPhone)だと下の画像の様に。iframeの部分が全部表示されて、格好悪いですね。
このようになってしまいますよね。
これだと新着情報を追加した分、延々と下に長くなってしまい格好悪くなってしまいます。
モバイルファースト、iOS(iPhone)の時代にこれは嫌ですよね。
それでは、対処方法を見ていきましょう。
iframeをiOS(iPhone)でもスクロールできるようにする対処方法
簡単です。下の２ステップです。
-
- CSSあてる用にiframeタグの親タグをつくる。
|
1 2 3 4 5 6 7 |
<div class="if_wrap"> <iframe src="shinchak.html" width="70%" height="auto"> </iframe> </div> |
-
- 上で作成したdiv class=”if_wrap “に下のCSSを指定する。
|
1 2 3 4 5 6 7 8 9 |
.if_wrap { -webkit-overflow-scrolling: touch; overflow: auto; height: 200px; } |
下の画像のように改善するのです。
収まっている＝指で上下にスクロールできるようになっています。
以上が対処方法となります。
スポンサードサーチ
iframeがiOS(iPhone)だとスクロールできない問題まとめ
-webkit-overflow-scrolling: touch;
overflow: auto;
上記の二行をiframeの親タグにCSSで効かせる。
一回成功したら簡単ですね。
私は、エンジニアの仕事をしていて、 古臭いcgiファイルで動的ページをiframe内に埋め込まれている状況で、勉強もしたことないSCSSファイルの修正から始まったので、大変でした。
要は、初心者って迷うんですよね。
１時間は無駄に迷いました。
落ち着いて調べていくしか解決方法はないですね。 結局は簡単でした。 参考になったらうれしいです。