Edited at

iPhoneでもiframeを使ってスクロールさせて、かつ、PCとも外観を揃える方法

More than 3 years have passed since last update.

レアケースではあるものの、例えば利用規約などをiframeで表示させていて、レスポンシブでiPhoneにも表示させたとしましょう。

そんな時、iPhoneでのiframeの挙動は困ってしまう部分があるので、解決策を。


基本、iframeはiPhoneでは全体が表示されてしまう

基本、iframeはiPhoneでは全体が表示されてしまう

CSSでiframe要素にサイズ指定をしても、横幅は可変しますが、縦は全体が表示されるままです。


なので、-webkit-overflow-scrollingで制御

真っ先に思い浮かぶのが、iframeの外側の要素でこのCSS。


css

div {

width:hogehoge;
height:hogehoge;
overflow:scroll;
-webkit-overflow-scrolling:touch;
}

-webkit-overflow-scrollingで制御

これだけで無事、スクロールはできましたが、

PC側で表示が崩れる

PC側で表示が崩れてしまっているので、外側の要素に収まるようにサイズ指定。


css

iframe {

width:100%;
height:100%;
}

なぜかスクロールバーが二重に…

すると、なぜかスクロールバーが二重に…


PCとも外観を揃えていくには、ここからが試行錯誤…

いろいろ試した結果、iframeにborder:noneとdisplay:block、外側の要素のoverflow:scrollをautoにすることで解決。

iPhoneでもiframeを使ってスクロールできた


html

<div>

<iframe src="hogehoge.html" name="hogehoge"></iframe>
</div>


css

iframe {

width:100%;
height:100%;
border:none; /* 追加で指定 */
display:block; /* 追加で指定 */
}

div {
width:hogehoge;
height:hogehoge;
overflow:auto; /* scrollからautoに変更 */
-webkit-overflow-scrolling:touch;
border:1px solid #c9c9c9; /* ついでに枠線も整形 */
}


というか、もう少しなんとかならんものか。