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

2018/03/23更新　カテゴリー：開発奮闘記　タグ: css

SPONSOR

スマホでハンバーガーメニューを実装していたのですが、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;を入れておくと慣性スクロールが効くのでスムーズに。

SPONSOR

PRODUCT

入江慎吾／イリテク代表
「死ぬ気でやれよ、死なないから」をモットーに体当たりでWEBサービスをつくってます🔥 収入もないのに受託開発をやめて好きなサービスだけをつくることに決めました。資金がつきるか、ヒットするのが先か...見守ってください。（詳しいプロフィール）

WEBサービス・アプリ開発に役立つ情報をイリテクの入江がお届けします。プログラミング、UI/UXデザイン、SNS・ブログマーケティングなど、プロダクト開発だけで自由に生きていくための実践的な情報を配信しています。