• 文字サイズ


解決済

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

  • 相談者:非公開
  • 2020/02/12 11:17
いつも大変お世話になっております。

goldに以下のようなページを作りました。

横一列にサイズ固定(100px✕100px)の画像を10個並べました。
横一列を囲む全体の横幅はスマホサイズ等の可変に合わせ100%
当然、画像がサイズ固定なので、10個並べると1000pxになり、
スマホ縦表示(幅375px)で見たとき1000px-375pxの625px分の画像は画面から飛び抜け、
表示されないので、そこをoverflow:scrollで横スクロールできるようにしました。

goldにアップしたファイルを自分のスマホで表示した場合、問題なく横スクロールできるのですが、
何故かそれを楽天スマホページへiframeにて設置すると、overflow:scroll の横スクロールが効かず、スマホの幅よりはみ出て表示されてしまいます。

iframeのwidthは100%にしています。
iframeから表示させるとoverflow:scroll の横スクロールが効かない状態になっているみたいです。

css等、何かしらの設定かと思いますが、どこに不備があるか教えて下さい。
よろしくお願いいたします。
キーワード:htmlcssoverflowスクロール
投稿内容について報告する

今気になってる疑問、
セミナーに参加すれば解決するかも!?
日本全国のネットショップ12,000社が参加!
ネットショップでお悩みがある方はまずはオンラインセミナーへGO!
広告0円で楽天の売上アップ続出!
ECマスターズチャンネルをチェック!
総視聴回数15万回突破!
最新の対策事例やSALE対策など、売上にお困りの方はぜひご視聴ください!

  • 返信者:非公開
  • 2020/02/12 17:03
ECマスターズの田中です。

iOS上のiframeは、基本的に、
他に比べて特殊な動作をする仕様になっております。
(おそらく、2本指でスクロールする………(省略)………
  • 返信者:非公開(質問者)
  • 2020/02/13 18:49
ECマスターズ
田中様

ご回答ありがとうございます。

>おそらく、2本指でスクロールすると、動作するのではないでしょうか
これについては、スクロ………(省略)………
  • 返信者:非公開
  • 2020/02/13 19:42
ECマスターズの田中です。

<div ="" style="overflow-x:scroll;-webkit-overflow-scrolling:to………(省略)………
  • 返信者:非公開(質問者)
  • 2020/02/19 13:02
田中様

ご回答ありがとうございます。

iframeの中のHTMLに直接<div style="overflow-x:scroll;-webkit-o………(省略)………
  • 返信者:非公開
  • 2020/02/19 16:23
ECマスターズの田中です。

overflowを入れ子にしてはならない、
といったような無いと認識しておりますが、
原因を探るには、実際の様子を確認させ………(省略)………
  • 返信者:非公開(質問者)
  • 2020/03/25 11:31
ECマスターズ
田中様

ありがとうございます。
原因が何なのかわかりませんがいじってたらなんとなく解決したかも? 
という感じでした。

解決の………(省略)………
このフォーラムへの質問は終了しました