Skip to content →

スマホのハンバーガーメニューで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

入江 慎吾
教える、学べるオンラインメンターサービスMENTAの代表 / 2-30個のサービスをつくり、M&Aで億単位の売却 / 受託開発20年→受託をやめサービス開発に専念→個人開発でつくったMENTAがヒット→ランサーズグループにジョイン / YouTubeで「サービスづくりで生きていく」配信中 / 「自分のサービスで生きていく」をコンセプトに個人開発オンラインサロン「入江開発室」を運営(詳しいプロフィール)

SUBSCRIBE

メールマガジンに登録いただけると、ブログの新着記事をお知らせいたします。(励みにもなります!)また、YouTubeチャンネルでも個人開発・サービスについての情報を発信中です。

SPONSOR

Published in 開発奮闘記