ドロワーメニューの動作について

Question

お世話になっております。
前回質問させていただいた、ドロワーメニューについての動作に
関してなのですが、ご回答いただいた方法でアンドロイドではうまく反映されたのですが
再度別の端末(iphone se)で動作確認をしたとき、デザインや検索などは問題なく
スクロール動作がうまくできていませんでした。
スクロールするときに、ドロワーナビは動かずバックの店舗ページが動いてします。
また、価格～あたりからスクロールすると若干ナビのほうがスクロールされる状態です。
この動作を直すにはCSSかJSのコードかバージョンをいじれば直るのでしょうか？
アドバイスの方お願い致します。

ドロワーメニューを反映させているテストページ
https://www.rakuten.ne.jp/gold/tokeiten/ogaria/page_create/page/1491788273666/indextest.html

Accepted Answer

ECマスターズの田中です。

> iframeから直接HTMLに切り替えましたらスムーズに動くようになりました。
無事動作して何よりです。

> iOSとAndroidでスムーズに動かすには直接HTMLに記入しないと難しいでしょうか？
そうですね、今まで見てきた状況ですと、直接記入しないと難しいです。

>  文字数の関係でiframeを使わないとドロワーメニューの導入が厳しいです。
ということであれば、ドロワーメニューの中身を
JavaScriptで記載されるのはいかがでしょうか。

$(document).ready(function() {
と
$('.drawer').drawer();
の間に、
$('#leftnav').html('ドロワーメニューの中身のソース');
という形式でご記載いただく形になります。
このJavaScriptの部分を外部JSファイルをしてご記載いただくことで、
文字数制限を回避することができます。

上記記述の場合、「ドロワーメニューの中身のソース」の途中に
シングルクォーテーション（'）と改行を含めることができないことを
お含みおきいただきますようお願いします。

実際にソースを記載される前に
http://minifycode.com/html-minifier/
を利用して無駄な改行やスペースを削除して貼り付け、
再び編集が必要となった場合は
http://minifycode.com/html-beautifier/
を利用して見やすいコードに戻す、
という形でご対応いただければと思います。

Answer

ECマスターズの田中です。

ドロワーメニューの動作について、
確認の上改めてご返信いたします。

Answer

ECマスターズの田中です。

いただいたページを確認したところ、
確かにスクロール周りが不安定な印象を受けるのですが、
明確な原因が特定できずにおります。

ご提案なのですが、
ドロワーメニューの中でiframeをご利用いただくことを止め、
HTMLを直接ご記載いただくのはいかがでしょうか。

iframeは、iOSとAndroidで高さの調整方法が異なるなど、
スマートフォンでは仕様が安定しない仕組みとなっております。
iframeを使わないことで、スマートフォンでの挙動が安定するかどうか
一度ご確認いただきますようお願いいたします。

Answer

ご回答ありがとうございます。
iframeから直接HTMLに切り替えましたらスムーズに動くようになりました。
スマホ用topページはこの方法でいいのですが、スマホ用商品ページに導入する際、
文字数の関係でiframeを使わないとドロワーメニューの導入が厳しいです。
iOSとAndroidでスムーズに動かすには直接HTMLに記入しないと難しいでしょうか？

Answer

ご回答ありがとうございます。
JavaScriptで商品ページも解決できそうです！

アドバスしていただきありがとうございました。