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

2019年8月7日

iframe iOS スクロールできない iPhone

Left Caption

ペルソナ子

iPhoneでサイト見ると、
iframeのスクロールできない
Left Caption

ペルソナ子

PCだったら普通にスクロールバーが出てるのに!
Left Caption

ペルソナ子

新着情報が全部表示される!
なんか縦長くて格好悪いよ!

その問題は私もくらいました。

悩みますよね。

「壊れてるぞ」って言って、私も1時間程悩みました。

でも結論から言うと、

CSSで解決できます。

私の様に無駄な時間を消費してほしくないので、まとめました。

5分程度で読み終える内容なので是非読み進めてください。

でわ早速、
内容を確認しに下へ進む!

スポンサードサーチ

iOS(iPhone)だとiframeのスクロールができない問題とは

一旦、内容確認です。

これ読んでる方はiOS(iPhone)での問題で間違いかと思います。androidでは発生しないはずです。

というのも私は最初、「iframe スマホ スクロールできない」で検索していたのですが、

結局iOS(iPhone)だけの問題ですね。

まずPCではちゃんとスクロールできます。下の画像をご確認ください。

iframe iOS スクロールできない iPhone
PCだとiframeの新着情報にスクロールバーがある

よく見る、新着情報ですね。

このように、PC版では普通にスクロールバーが出ますね。

でもiOS(iPhone)だと下の画像の様に。iframeの部分が全部表示されて、格好悪いですね。

iframe iOS スクロールできない iPhone
iOS(iPhone)だと新着情報が全部表示されてる様子

このようになってしまいますよね。

これだと新着情報を追加した分、延々と下に長くなってしまい格好悪くなってしまいます。

モバイルファースト、iOS(iPhone)の時代にこれは嫌ですよね。

それでは、対処方法を見ていきましょう。

iframeをiOS(iPhone)でもスクロールできるようにする対処方法

簡単です。下の2ステップです。

    1. CSSあてる用にiframeタグの親タグをつくる。

    1. 上で作成したdiv class=”if_wrap “に下のCSSを指定する。

Right Caption

 

これだけなら簡単や!

下の画像のように改善するのです。

iframe iOS スクロールできない iPhone
収まりました!!

収まっている=指で上下にスクロールできるようになっています。

以上が対処方法となります。

スポンサードサーチ

iframeがiOS(iPhone)だとスクロールできない問題まとめ

-webkit-overflow-scrolling: touch;
overflow: auto;
上記の二行をiframeの親タグにCSSで効かせる。

一回成功したら簡単ですね。

私は、エンジニアの仕事をしていて、 古臭いcgiファイルで動的ページをiframe内に埋め込まれている状況で、勉強もしたことないSCSSファイルの修正から始まったので、大変でした。

要は、初心者って迷うんですよね。

1時間は無駄に迷いました。

落ち着いて調べていくしか解決方法はないですね。 結局は簡単でした。 参考になったらうれしいです。