HTMLでスマートフォンメニュー、ドロワーメニュー(いわゆるハンバーガーメニュー)を実装する場合、メニューが多くなり縦に長くなる場合はスクロールで問題が生じやすいです。
javascriptやjQueryでメニューを実装している場合は、そのファイルで設定、調整する形になりますが、ほとんどがCSSで解決できます。
スクロールがうまくいかない場合の設定で試すこと
ドロワーメニューでスクロールで問題がおきる場合は、
親要素に下記のどれかを追加して解決できる場合は試してましょう。
overflow-y: auto;
height:値;
max-height:値;
max-height: calc(値);
overflow-scrolling: touch;
overflow-y: scroll;
例:
ul { overflow-scrolling: touch; overflow-y: scroll; max-height: 100vh; }
iPhoneで一番下のメニューが切れて表示されない場合は
ドロワーメニューのスクロールの問題が解決しても、iPhoneで一番下のメニューが見えない、途中で切れて表示されない事がよくあります。
safariだけの場合という事もあります。
その場合は最後、最終の要素にpadding-bottomかmargin-bottomを設定してみましょう。
li:last-child
例:
li:last-child{ margin-bottom:40px; }
特にsafariのみ一番下のメニューが途中で切れてしまう場合はこの設定で解決できる場合があります。
それ以外でもcssでpaddingを設定して調整が効く事もあるので色々試してみましょう。