スマホのハンバーガーメニューでpositionにfixedを入れてスクロールできなくなる問題を解決

スマホでハンバーガーメニューを実装していたのですが、positionにfixedを入れていると位置が固定されてしまい、スクロールできなくなります。メニューの数が多くなるとスクロールできないため、メニューとして機能しなくなるという問題の解決法について。
下のようになっているような場合に発生します。
<nav> <ul> <li>メニュー</li> (中略) </ul> </nav>
nav { position: fixed; top: 0; left: 0; width: 100%; height: 100%; }
こういう場合、navの下のulにoverflowを入れれば解決します。
nav ul{ height: 100%; overflow: auto; -webkit-overflow-scrolling: touch; }
-webkit-overflow-scrolling: touch;を入れておくと慣性スクロールが効くのでスムーズに。
[sc name=”engeneer”]
SHARE
PROFILE

入江 慎吾
Webサービスを作るのが大好きです。制作会社10年→フリーランス→受託をやめサービス開発に専念。プログラミングのメンターサービスMENTAは月間流通額約1,300万を突破🚀 YouTubeでは個人開発について語ってます / 「自分のサービスで生きていく」をコンセプトに個人開発オンラインサロン「入江開発室」を運営(詳しいプロフィール)
Webサービスを作るのが大好きです。制作会社10年→フリーランス→受託をやめサービス開発に専念。プログラミングのメンターサービスMENTAは月間流通額約1,300万を突破🚀 YouTubeでは個人開発について語ってます / 「自分のサービスで生きていく」をコンセプトに個人開発オンラインサロン「入江開発室」を運営(詳しいプロフィール)