iframeがiOS(iPhone)だとスクロールできない時の対処法を解説

ペルソナ子
iframeのスクロールできない

ペルソナ子

ペルソナ子
なんか縦長くて格好悪いよ!
その問題は私もくらいました。
悩みますよね。
「壊れてるぞ」って言って、私も1時間程悩みました。
でも結論から言うと、
CSSで解決できます。
私の様に無駄な時間を消費してほしくないので、まとめました。
5分程度で読み終える内容なので是非読み進めてください。
内容を確認しに下へ進む!
スポンサードサーチ
iOS(iPhone)だとiframeのスクロールができない問題とは
一旦、内容確認です。
これ読んでる方はiOS(iPhone)での問題で間違いかと思います。androidでは発生しないはずです。
というのも私は最初、「iframe スマホ スクロールできない」で検索していたのですが、
結局iOS(iPhone)だけの問題ですね。
まずPCではちゃんとスクロールできます。下の画像をご確認ください。

よく見る、新着情報ですね。
このように、PC版では普通にスクロールバーが出ますね。
でもiOS(iPhone)だと下の画像の様に。iframeの部分が全部表示されて、格好悪いですね。

このようになってしまいますよね。
これだと新着情報を追加した分、延々と下に長くなってしまい格好悪くなってしまいます。
モバイルファースト、iOS(iPhone)の時代にこれは嫌ですよね。
それでは、対処方法を見ていきましょう。
iframeをiOS(iPhone)でもスクロールできるようにする対処方法
簡単です。下の2ステップです。
-
- 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ファイルの修正から始まったので、大変でした。
要は、初心者って迷うんですよね。
1時間は無駄に迷いました。
落ち着いて調べていくしか解決方法はないですね。 結局は簡単でした。 参考になったらうれしいです。