楽天スマホページで overflow:scroll が効かなくてスクロールできない

Question

いつも大変お世話になっております。

goldに以下のようなページを作りました。

横一列にサイズ固定(100px✕100px)の画像を10個並べました。
横一列を囲む全体の横幅はスマホサイズ等の可変に合わせ100％
当然、画像がサイズ固定なので、10個並べると1000pxになり、
スマホ縦表示(幅375px)で見たとき1000px-375pxの625px分の画像は画面から飛び抜け、
表示されないので、そこをoverflow:scrollで横スクロールできるようにしました。

goldにアップしたファイルを自分のスマホで表示した場合、問題なく横スクロールできるのですが、
何故かそれを楽天スマホページへiframeにて設置すると、overflow:scroll の横スクロールが効かず、スマホの幅よりはみ出て表示されてしまいます。

iframeのwidthは100%にしています。
iframeから表示させるとoverflow:scroll の横スクロールが効かない状態になっているみたいです。

css等、何かしらの設定かと思いますが、どこに不備があるか教えて下さい。
よろしくお願いいたします。

Accepted Answer

ECマスターズの田中です。


と

で、iframeを囲んでいただき、問題なく動作した、
ということですね。
無事動作して何よりです。

> GOLD側で制御することも可能なのでしょうか？

私にて動作確認したところ、
iframeの中のHTMLにて

と

で囲まれた部分を作り、
無事に横スクロールを行うことができましたので、
FUJIさんにて、テスト用のページでも結構ですので、
一度作成していただきますようお願いいたします。

Answer

ECマスターズの田中です。

iOS上のiframeは、基本的に、
他に比べて特殊な動作をする仕様になっております。
（おそらく、２本指でスクロールすると、動作するのではないでしょうか）

差し支えなければ、
横一列の画像を、スマホページに直接ご設置いただいた上で、

と

で囲んでいただき、
問題なく動作するか、ご確認いただきますようお願いします。

どうしてもGOLDを使う必要がある、など
不明な点がございましたら、返信にてお知らせ願います。

Answer

ECマスターズ
田中様

ご回答ありがとうございます。

＞おそらく、２本指でスクロールすると、動作するのではないでしょうか
これについては、スクロールできないというよりは横に長く表示しoverfloｗが全く作動しなくなったためできませんでした。

しかしながら、上記タグで囲んだ場合、スムーズなスクロールで表示できました。
ありがとうございます。

ただ、この場合囲んだiframeがそのままスクロールするため、サムネイル横一列の上にgold上に一緒にタイトルなど入れていた場合はタイトルごと流れていきました。
タイトルと分けて設置すれば問題はないですが、、。

GOLD側で制御することも可能なのでしょうか？

Answer

田中様

ご回答ありがとうございます。

iframeの中のHTMLに直接で囲んでみましたが、うまく反応しませんでした。

で囲む場合は、
囲む対象にoverflow-x:scrollが指定してあると効かないなど、ルールはありますか？

Answer

ECマスターズの田中です。

overflowを入れ子にしてはならない、
といったような無いと認識しておりますが、
原因を探るには、実際の様子を確認させていただく
必要がございます。

実際に、横スクロールを実装しようとされたページのURLを、
当記事への返信、もしくは元質問右下の「投稿内容について報告する」より
お送りいただきますようお願いします。

Answer

ECマスターズ
田中様

ありがとうございます。
原因が何なのかわかりませんがいじってたらなんとなく解決したかも？　
という感じでした。

解決のヒントになりました。
ありがとうございました。