スマホでトップページのスクロールについて

Question

お世話になっております。
下記URLで自社サイトを運営しております。
https://aibeaute.aivivid.co.jp/

スマホでトップページ確認した際、スクロールがスムーズでないのですが
(下にスクロールしようとすると引っ掛かる感じ)
こちらの修正方法についてご存知でしたらご教示いただきたく存じます。
お手数ですがよろしくお願いいたします。

Answer

ECマスターズの北原です。

>スマホでトップページ確認した際、スクロールがスムーズでないのですが
>(下にスクロールしようとすると引っ掛かる感じ)
>こちらの修正方法についてご存知でしたらご教示いただきたく存じます。

タグの高さが足りず、
内でスクロールされてしまいます。

下記のようにheightの値を変更することで
修正いただけますのでお試しください。

■メインコンテンツのタグ


このページはインラインフレームを使用しています。 インラインフレームに未対応のブラウザをお使いの方は
こちら をご覧下さい。


↓　↓　↓　heightを435vhへ変更してください。


このページはインラインフレームを使用しています。 インラインフレームに未対応のブラウザをお使いの方は
こちら をご覧下さい。


■お知らせのタグ


 インラインフレーム対応ブラウザでご覧いただけます。
インラインフレームに未対応のブラウザをお使いの方は こちら をご覧下さい。


↓　↓　↓　heightを200へ変更してください。


 インラインフレーム対応ブラウザでご覧いただけます。
インラインフレームに未対応のブラウザをお使いの方は こちら をご覧下さい。



また、JavaScriptを利用することで、
iframeの高さを自動調整することもできますので、
併せてご検討くださいませ。

iframeの高さを判別して自動的に調整する(JavaScript)
https://onoredekaiketsu.com/iframe-height-adjust-javascript/

Answer

ECマスターズ 北原様

ご返答いただきありがとうございます。
ご教示いただきました通りの内容で修正し、スマホで確認いたしましたところスクロールしようとすると、はやりヘッダーのところでつかえるような感じがまだあるようです。
こちらは解決することは難しいでしょうか？
度々お手数ではございますが、ご確認いただけますと幸いです。
よろしくお願いいたします。

Answer

ECマスターズの北原です。

>ご教示いただきました通りの内容で修正し、スマホで確認いたしましたところスクロールしようとすると、はやりヘッダーのところでつかえるような感じがまだあるようです。

下記のiframeタグのheightの値を
さらに大きくしていただくといかがでしょうか。
一度1000vhなどにしていただき、
スクロールが引っかからないことを確認後、
500vhなどに調整していくことをお勧めいたします。


このページはインラインフレームを使用しています。 インラインフレームに未対応のブラウザをお使いの方は
こちら をご覧下さい。


基本的にはiframeタグの高さが足りないことで、
今回のようなスクロールの問題が起きてしまいます。
heightの値を適切に設定することで解決できますが、
ブラウザや端末の画面幅により、
iframe内のコンテンツの大きさも異なり
heightの適切な値も変化します。

そのため、根本的な解決をするためには
JavaScriptを利用しiframeのサイズを
自動調整する必要がございます。

iframeの高さを判別して自動的に調整する(JavaScript)
https://onoredekaiketsu.com/iframe-height-adjust-javascript/

Answer

ECマスターズ　北原様

>下記のiframeタグのheightの値を
>さらに大きくしていただくといかがでしょうか。
>一度1000vhなどにしていただき、
>スクロールが引っかからないことを確認後、
>500vhなどに調整していくことをお勧めいたします

上記で確認し、無事にスクロールがスムーズに出来るようになりました。
ありがとうございました。